Access to XMLHttpRequest has been blocked by CORS policy

There are two ways this can be handled:

1. Temporary Front-End solution so you can test if your API integration is working:

Click on window -> type run and hit enter -> in the command window copy:

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

This will open a new "Chrome" window where you can work easily. This is a temporary solution. Every time you will have to work with this chrome window.

2. Permanent solution:

In the backend code, the developer needs to add an annotation @Crossorigin right above the CRUD api call method.

Let me know if it works.

Your error:

Access to XMLHttpRequest at 'my_url' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

My error:

Access to XMLHttpRequest at 'localhost:3000/api/todo' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

(Even though a bit different error but i'll answer anyway)

Now two questions here:

1. How did i resolve my issue?

Ans. Putting 'http://' before api i used, means 'http://localhost:3000/api/todo'.

2. What might've caused your error?

Ans. Can't say for sure but i dont see your api url instead it says 'my_url' (comparing both errors). I thik you may've passed string instead of variable.

I'll be happy if this helps anyone. Because this cost me almost 2hr and now it's midnight(almost).

I ran into the same issue even though my API was using cors and had the proper headers.

So for me, the issue was that I was making an insecure request. I was accessing my API over the http protocol, and that was causing the error.

I just changed from

http://api.example.com

to https protocol

https://api.example.com

and it fixed everything.

You can also create a simple proxy on your website to forward your request to the external site. For example, if you are trying to fetch some data from your website (my-website.com) to (another-website.com) and you make a POST request, you can have cors issues, but if you fetch the data from your own domain you will be good.

Here is how to create a simple proxy forwarding the request https://stackoverflow.com/a/20354642/7602110

So instead of making request to

POST https://api.example.com/event/create

You'll want to make the request to

POST https://my-website.com/api/event/create

I know that is some extra work, and sometimes you don't have the ability to do it, but that will definitely prevent you from having cors issues.

use this in Node

    app.use(function (req, res, next) {
    //Enabling CORS
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, 
    Accept, x-client-key, x-client-token, x-client-secret, Authorization");
      next();
    });

And in angular the request is

 auth(login): Promise<any> {
 return new Promise((resolve, reject) => {
   this._http.post('url:3000/api/auth/login', { ...login })
     .subscribe((response: any) => {
       resolve(response);
     });
 });
}

I ran into the same issue some time ago. Below piece of code worked for me at the backend. The backend was written in express, node.

app.use(function (request, response, next) {
  response.header("Access-Control-Allow-Origin", "*");
  response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

This problem is not on your frontend angular code it is related to backend,

Try below steps in your backend code :

1.npm install cors

2.put app.use(cors()) in main express route file.(enables all CORS requests)

may be it works for you.

reference link : https://expressjs.com/en/resources/middleware/cors.html

Adding proxy in package.json or bypassing with chrome extension is not really a solution. Just make sure you've enabled CORS in your server side before you have registered your routes. Given example is in Node.js and Express.js. Hope this helps!

    app.use(cors())
    app.use('/posts', postRoutes)

I had this issues and it was an syntax error in my action definition

 def self.rate_skills(params)
    data = {}
    data = where(individual_id: params[:individual_id]).select(:tool_name, :score)group('category').order(score: :desc).first(3)
    data 
  end

the issue is that I was the period before "group"

 def self.rate_skills(params)
    data = {}
    data = where(individual_id: params[:individual_id]).select(:tool_name, :score).group('category').order(score: :desc).first(3)
    data 
  end

If you are using Tomcat try this: full documentation

 HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD");
        response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, "
                + "Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");


        if ( request.getMethod().equals("OPTIONS") ) {
            response.setStatus(HttpServletResponse.SC_OK);
            return;
        }


        filterChain.doFilter(servletRequest, servletResponse);

Then in web.xml

<filter>
    <filter-name>cors</filter-name>
    <filter-class>classYouImplementTheCodeAbove</filter-class>
</filter>

<filter-mapping>
    <filter-name>cors</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

If you are using other go to https://enable-cors.org/server.html and search for it