Setting up Apache's mod_proxy for handling ProxyPass and ProxyPassReverse to facilitate cross-domain ajax requests

I'm currently developing an HTML5-JavaScript mobile app using PhoneGap and need to interact with a REST service.

The REST service is hosted at 

"http://localhost:8080/backend/mvc/"

My development environment consists of a WAMP server (Apache2) at http://localhost/stage/ and I am using Chrome as my browser.

When attempting to make an AJAX call, the browser returns the error message: 

XMLHttpRequest cannot load http://localhost:8080/backend/mvc/event. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

I have explored various solutions to bypass this cross-domain AJAX call issue:

1) Tried launching Chrome with the command line option 

chrome.exe --disable-web-security
but it made no difference.

2) Attempted configuring Apache using mod_proxy to redirect the traffic.

In the httpd.conf file, I enabled the following modules:

proxy_module
proxy_connect_module
proxy_http_module

Additionally, I created a .htaccess file in the root directory with the following rules:

# Enable mod_rewrite
RewriteEngine On

ProxyRequests off
<Proxy>
    Order deny,allow
    Allow from all
</Proxy>

ProxyPass /EMBackend/ http://localhost:8080/backend/mvc/
ProxyPassReverse /EMBackend/ http://localhost:8080/backend/mvc/
RewriteRule ^/EMBackend/(.*)$ /backend/mvc/$1 [R]

After restarting all services (Apache, PHP, etc.), I encountered a 500 error.

The Apache error log reported: 

[Tue Oct 18 14:30:11 2011] [alert] [client 127.0.0.1] C:/wamp/www/.htaccess: ProxyRequests not allowed here

Could anyone suggest a resolution for this issue?

javascriptajaxapachecross-domain

Answer №1

I came across a solution that worked for me:

To enable, follow these steps:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Add the following code to the main section of your configuration file (or in the desired virtual host if using Apache virtual hosts):

ProxyRequests Off
ProxyPreserveHost On

<Proxy *>
    Order deny,allow
    Allow from all
</Proxy>

ProxyPass /EMBackend http://localhost:8080/backend/mvc
ProxyPassReverse /EMBackend http://localhost:8080/backend/mvc
<Location /EMBackend>
    Order allow,deny
    Allow from all
</Location>

It seems like I cannot place it in .htaccess, so I had to ensure that ProxyPreserveHost On is set. I included Include conf/extra/ in the httpd.conf file and created a new file named httpd-proxy.conf where I inserted the above script. After restarting Apache, everything started working as expected!

Answer №2

To implement this solution, all you need to do is insert the provided lines into the httpd.conf file after activating the proxy modules.

ProxyPreserveHost On
ProxyPass /EMBackend http://localhost:8080/backend/mvc
ProxyPassReverse /EMBackend http://localhost:8080/backend/mvc

After restarting the server, your configuration will be complete.

Answer №3

To activate the proxy feature in the latest version of Apache, follow these steps:

a2enmod proxy;
a2enmod proxy_http

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to add methods to underscore without making them available globally?

Have you added multiple methods to underscore within your package? _.mixin({ foo: function() {}, bar: function() {} //etc }); If you're concerned about potential conflicts with the main application or other packages, what's the best way ...

javascriptnode.jsnpmunderscore.js

Performing an API GET request in a header.ejs file using Node.js

Looking to fetch data from an endpoint for a header.ejs file that will be displayed on all routed files ("/", "/news" "/dogs"). Below is my app.js code: // GET API REQUEST var url = 'https://url.tld/api/'; request(url, function (error, response, ...

javascriptnode.jsexpressheaderejs

Trading keys between arrays in JavaScript

I have a set of simple objects contained within an array: var myObject1 = [ {name: "value1", adddress: "545454545445"}, {name: "value2", adddress: "323233223"}, {name: "value3", adddress: "332 ...

javascriptarrays

Why is the PHP response always 0 even though AJAX JSON data is being sent correctly during Wordpress plugin development?

There seems to be a simple issue here that I'm missing. The data is being sent correctly according to Firebug in the NET tab (NET tab-> Post -> Parameters). However, the PHP function does not even echo simple text. This is the PHP code: add_ac ...

phpjqueryajaxjsonwordpress

Is it feasible to incorporate an external library as a script within a class or functional component in React?

Welcome and thank you for taking the time to read this question! I am currently working on a project where I need to load a TIFF image. After researching, I found a library that can help with this task: https://github.com/seikichi/tiff.js There is also ...

javascriptreactjs

Struggling to understand how to utilize Firebase for logging in with Github

On my homepage, there is a link that directs to the following: <a href="/login">Login with Github</a> Within my app.js file, I have the following code snippet: app.get('/login', function(req, res) { var ref = new Firebase(&ap ...

javascriptnode.jsexpressoauthfirebase

Fill the rows of the <Table> using HTML code

I am encountering an issue with displaying data in a table on a screen: <table id="TransactionTable" class="table table-responsive table-striped"> <thead> <tr> <th></th> <th>Date</ ...

javascripthtml

Using JQuery to pass a concatenated variable

What is the reason behind the success of this code: $(".ab").css({'background':'#ce0000','color':'#EEE'}); While this code does not work: f("ab"); function f(ab){ var x = '".'+ ab +'"'; ...

javascriptjquery

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

I have two list items listed below: <li name="luxury" class="cars luxury> <div id="featured_lux" name="featured" class="carImg_lux col2_lux "> My Luxury Car<img border="0" class="car-im ...

javascriptjquerycss

Small jumps occur when implementing the scrollTop jquery animation

I've encountered an issue with the scrollTop jquery animation that I can't seem to resolve. It seems to micro-jump right before the animation, especially when there is heavier content. I'm puzzled as to why this is happening... Here's ...

javascriptjqueryhtmlmousewheelscrolltop

Showcase a sizable picture broken down into smaller sections

I am interested in creating a mapping application similar to Google Maps that can asynchronously load images from the backend. I am seeking guidance on where to begin and how to proceed in this endeavor. The ultimate goal is to have the image displayed w ...

javascriptjqueryhtml

The issue of excessive recursion in Typescript

Currently, I am in the process of learning Typescript while working on some exercises. While attempting to solve a particular problem, I encountered an error related to excessive recursion. This issue arises even though I created wrapper functions. About ...

javascripttypescriptconsole.log

Is it possible for me to avoid html tags inside a class without using the xmp tag?

There are a few ways to approach this question. It's important to decide which method will be most beneficial for your specific needs... Is it possible for JavaScript to recreate the deprecated <xmp> tag using an "xmp" class? Can we replicate ...

javascripthtmlescapingmarkdownxmp

The mesmerizing world of Vue templates and transition groups

My previous simple list had transitions working perfectly, but now that I am using components and templates the transitions no longer work. Can anyone help me understand why? I want each item to animate individually, but it seems like all items are transi ...

javascriptvue.jsvuejs2

Troubleshooting the deployment of a complete full-stack application on Heroku

I have been facing the challenge of deploying my full-stack chatkit messenger app from localhost to production on Heroku. I am encountering a 404 "Not Found" error and unsure about the necessary changes that need to be made in my code for it to run smoothl ...

javascriptnode.jsexpressherokubackend

Creating a dropdown menu with data loaded dynamically using ajax and json, all without relying on jquery

I am looking to populate a few select menus using JSON data retrieved from my PHP script. Each select menu should display different values based on the selections made in the other menus. While I understand how to clear and fill a select menu using JavaScr ...

javascriptajaxjsondrop-down-menu

Assigning a value to a variable from a method in Vue: a step-by-step guide

I'm having trouble assigning values from a method to variables in HTML. Here's what I have in my code: <b-card-text>X position {{xpos}}</b-card-text> <b-card-text>Y position {{ypos}}</b-card-text> I would like to assign v ...

javascriptvue.js

"Converting a database table record into a JavaScript array: Step-by-step guide

I'm currently expanding my knowledge of PHP by working on a small project. Within my database, I have a table called city_name which consists of columns for id, name, longitude, and latitude. Typically, this table contains around 10-15 rows. When a us ...

javascriptphparrays

Splitting up JavaScript and HTML within a WordPress environment

I recently came across a discussion on separating PHP code and HTML at this link I find myself in a similar predicament. My current project involves designing a WordPress website with numerous sliders, animated dropdowns, forms, and other components. The ...

javascripthtmlwordpressparadigmsoptimization

Encountering an error with Next.JS when using the "use client" directive

Recently encountered a bizarre issue with my next.js project. Every time I input "use client"; on a page, it triggers a "SyntaxError: Unexpected token u in JSON at position 0". Here's the code snippet for reference: "use client" ...

javascriptreactjsnext.js