Access to XMLHttpRequest has been blocked by CORS policy

Question

I\'ve a problem when I try to do PATCH request in an angular 7 web application. In my backend I have:

app.use((re         


        

Answer 1

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();
});

Answer 2

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

Answer 3

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);
     });
 });
}

Answer 4

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

Answer 5

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.

Answer 6

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.