Nginx configures cross-domain status code 200, but reports a CORS error, which is actually cross-domain
Yesterday, ubuntu released the vue online project through nginx.
Today, when debugging the background interface, there is a cross-domain problem. Since the online is under the same domain name, there will be no cross-domain when calling the interface in the online project. The main problem is that there are cross-domain problems during local debugging;
Solution:
Add this configuration to the nginx configuration
add_header Access-Control-Allow-Methods '*';
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin '*';
add_header Access-Control-Allow-Headers $http_access_control_request_headers always;
if ($request_method = OPTIONS) {
return 200;
}
// 在server下的location中配置
After configuring, remember to restart it.
At this time, you can access it, but when you call the interface, you will find that the status code in the network returns 200, but the state shows CORS error.
The reason is as follows , I don’t know Sister Li~~
At this time, nginx has been successfully configured.
After constant consultation with Du Niang, I saw a more credible reason: the browser's js engine also follows the same-origin policy when parsing. Since the local browser address is not under the same domain name as the accessed address, it returns cross- domain error.
It is relatively simple to know the reason. You can refer to my previous article for front-end and back-end local joint debugging and cross-domain debugging . Although it is no longer local joint debugging, the method used is the same, using proxy proxy forwarding to fool the browser.
After the proxy proxy is completed according to the cross-domain configuration of the front-end and back-end local joint debugging , you can visit it again.
Formal projects should not configure Access-Control-Allow-Methods '*', it is not safe, because no matter who configures a proxy, they can access your interface, and I have not explained the above nginx configuration, explained It is also misleading readers, because I have a vague concept of it, and I am currently exploring and learning. If you need to know more, please go to Baidu, O(∩_∩)O hahaha~
Share a stepping experience every day~~~