The requested resource is missing the 'Access-Control-Allow-Origin' header for the XMLHttpRequest

Question

The requested resource is missing the 'Access-Control-Allow-Origin' header for the XMLHttpRequest

After extensive research on StackOverflow, I have not been able to find a solution to my specific issue among the several questions addressing similar errors.

The scenario involves running an Angular app (port 9000) and a Rails app (port 3000) on a remote server. The Angular app makes post requests to the Rails app.

Upon sending a request, the Javascript console displays the following error message:

XMLHttpRequest cannot load http://0.0.0.0:3000/api/query. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.241.16.159:9000' is therefore not allowed access.

Based on my understanding, I need to modify something in my Rails app to enable connections from other servers (even though both are on the same ec2 instance).

I attempted to add a line like

  skip_before_filter :verify_authenticity_token

To one of my controllers in Rails, but it did not resolve the issue.

What steps should I take to fix this error?

javascript ruby-on-rails angularjs

Answer 1

Answer №1

Within the application_controller.rb file:

Ahead of filtering: add_allow_credentials_headers

def integrate_allow_credentials_headers                                                                                                                                                                                                                                                 
  # For more detailed information, visit https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#section_5                                                                                                                                                                                                   
  #                                                                                                                                                                                                                                                                                       
  # To enable the front-end to submit cookies for API authentication via 'withCredentials' in the XMLHttpRequest, certain headers must be included to prevent browser rejection of the response                                                                                                                                                                                                                                             
  response.headers['Access-Control-Allow-Origin'] = request.headers['Origin'] || '*'                                                                                                                                                                                                     
  response.headers['Access-Control-Allow-Credentials'] = 'true'                                                                                                                                                                                                                          
end 

def choices                                                                                                                                                                                                                                                                              
  head :status => 200, :'Access-Control-Allow-Headers' => 'accept, content-type'

In the routes.rb configuration file:

Match any route to 'application#options', using [:options] as the method

Note that OPTIONS requests are being handled here due to Angular front-end performing POST requests. The inclusion of Access-Control-Allow-Credentials is specifically tailored for my app's cookie transmission from the front-end.

I recommend thoroughly reading through the mozilla link provided in the code above for a comprehensive understanding of CORS. Depending on your requirements, you may need to adjust the permissiveness of the code snippet above.

Answer 2

Within the application_controller.rb file:

Ahead of filtering: add_allow_credentials_headers

def integrate_allow_credentials_headers                                                                                                                                                                                                                                                 
  # For more detailed information, visit https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#section_5                                                                                                                                                                                                   
  #                                                                                                                                                                                                                                                                                       
  # To enable the front-end to submit cookies for API authentication via 'withCredentials' in the XMLHttpRequest, certain headers must be included to prevent browser rejection of the response                                                                                                                                                                                                                                             
  response.headers['Access-Control-Allow-Origin'] = request.headers['Origin'] || '*'                                                                                                                                                                                                     
  response.headers['Access-Control-Allow-Credentials'] = 'true'                                                                                                                                                                                                                          
end 

def choices                                                                                                                                                                                                                                                                              
  head :status => 200, :'Access-Control-Allow-Headers' => 'accept, content-type'

In the routes.rb configuration file:

Match any route to 'application#options', using [:options] as the method

Note that OPTIONS requests are being handled here due to Angular front-end performing POST requests. The inclusion of Access-Control-Allow-Credentials is specifically tailored for my app's cookie transmission from the front-end.

I recommend thoroughly reading through the mozilla link provided in the code above for a comprehensive understanding of CORS. Depending on your requirements, you may need to adjust the permissiveness of the code snippet above.

Answer 3

Answer №2

If you're not familiar with the issue at hand, let me explain what's going on...

Your apps are facing an obstacle known as the CORS policy

--

CORS (Corss Origin Resource Sharing)

When your application tries to access a endpoint on another server using XHR (XML HTTP REQUEST), it automatically blocks access to the requested resource by default.

The main reason for this restriction is to control which data/resources can be accessed through XHR, typically used for APIs.

--

rack-CORS

To resolve this issue, you must enable access to your Java application within your Rails app - I suggest utilizing the rack-CORS gem:

#Gemfile
gem 'rack-cors'

#config/application.rb
config.middleware.use Rack::Cors do
   allow do
     origins '*'
     resource 'api/jquery', :headers => :any, :methods => [:get, :post]
   end
end

This configuration will permit requests from various applications, resolving the CORS issue.

Answer 4

If you're not familiar with the issue at hand, let me explain what's going on...

Your apps are facing an obstacle known as the CORS policy

--

CORS (Corss Origin Resource Sharing)

When your application tries to access a endpoint on another server using XHR (XML HTTP REQUEST), it automatically blocks access to the requested resource by default.

The main reason for this restriction is to control which data/resources can be accessed through XHR, typically used for APIs.

--

rack-CORS

To resolve this issue, you must enable access to your Java application within your Rails app - I suggest utilizing the rack-CORS gem:

#Gemfile
gem 'rack-cors'

#config/application.rb
config.middleware.use Rack::Cors do
   allow do
     origins '*'
     resource 'api/jquery', :headers => :any, :methods => [:get, :post]
   end
end

This configuration will permit requests from various applications, resolving the CORS issue.

Answer 5

Answer №3

Give this code a try

  <httpProtocol>
          <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
           <add name="Access-Control-Allow-Headers" value="Content-Type" />
           <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
          </customHeaders>
     </httpProtocol>

within the <system.webServer>

Answer 6

Give this code a try

  <httpProtocol>
          <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
           <add name="Access-Control-Allow-Headers" value="Content-Type" />
           <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
          </customHeaders>
     </httpProtocol>

within the <system.webServer>

The requested resource is missing the 'Access-Control-Allow-Origin' header for the XMLHttpRequest

Answer №1

Answer №2

Answer №3

Similar questions

Transmit the canvas image and anticipate the AJAX POST response

Problem encountered while attempting to sort a table with JavaScript and jQuery

Error: Identical div IDs detected

Tips for assigning a Custom Formik Component's value to the Formik value

Guide to creating an asynchronous function

What is the best way to remove an item from an object?

How to incorporate a routing file within another routing file in Node.js

What is the best way to maintain the previous input value on page refresh in Vuejs?

Is it possible to optimize the Dojo build system to only compile Dojo when necessary?

What are some possible reasons why ng-class in AngularJS might add a class instead of removing it?

When trying to insert glyphicons into a textarea, the result is displaying the actual text instead

Steps for converting a window to a PDF file rather than an XPS file

Angular JS does not acknowledge null values

What is the best way to use a CSS class in my script specifically for specific screen sizes?

What is the best way to adjust the autoplay volume to a set level?

Reordering div elements with JQuery

Tips for extracting specific values from JavaScript using jQuery in ASP to be utilized in the C# code behind section

The function of cookieParser() is causing confusion

The DOM assigned a new source to an image

Transforming a JavaScript map into an array of objects