问题
I've a problem when I try to do PATCH request in an angular 7 web application. In my backend I have:
app.use((req, res, next) => {
res.set({
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "*",
"Access-Control-Allow-Headers": "'Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token'",
});
next();
});
In my frontend service, I've:
patchEntity(ent: any, id) {
let headers = new Headers({ 'Content-Type': '*' });
let options = new RequestOptions({ headers: headers });
return this.http.patch('my_url', ent).map((res: Response) => res.json());
};
The error is:
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.
What can I to do? Thanks.
回答1:
There are two ways this can be handled:
- 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.
- 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.
回答2:
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);
});
});
}
回答3:
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();
});
回答4:
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.
回答5:
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:
- How did i resolve my issue?
Ans. Putting 'http://' before api i used, means 'http://localhost:3000/api/todo'.
- 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).
回答6:
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
回答7:
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
来源：https://stackoverflow.com/questions/53258297/access-to-xmlhttprequest-has-been-blocked-by-cors-policy