最近连续两个朋友问我跨域相关问题，我猜想可能不少朋友也遇到类似问题，我打算写个博客聊一下我实际使用的配置，
First of all, I don’t know much about this configuration, and I don’t have the energy to understand too much, but I think there are some key points for attention. Maybe some beginners don’t pay attention to it, causing configuration problems. This article may only be correct Novices are a bit helpful, if you have a good configuration, please comment and reply, let everyone learn!
Nginx's CORS configuration, there are too many configurations on the Internet, but everyone copies and pastes and forwards more, almost all of them are similar to the following three or two lines:
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
Is this useful? It's useful. I have used it like this before, but I still encountered problems later. I found that some project requests were unsuccessful, and some browsers were successful, and some browsers were unsuccessful.
I also searched for various information and adjustments online. The writing method. Finally, I adjusted the writing method. The basic use is no problem. I have been using it in the project!
Here is a section of part of the configuration in my actual project:
location /xxx-web {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
root html;
index index.html index.htm;
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 5;
}
The cross-domain related configuration mainly includes the following parts:
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
Let's briefly explain it below so that you can configure it successfully!
1. Access-Control-Allow-Origin , here the variable $http_origin is used to obtain the current source domain. Everyone said that "*" means allow all, but my actual use was not successful. The reason is unknown;
2. Access-Control-Allow-Credentials , when it is true, it means that cookies can be brought with the request, and configure it according to the situation;
3. Access-Control-Allow-Methods , OPTIONS must be available, and generally also GET and POST, if you have others, you can also add them;
4. Access-Control-Allow-Headers , this must be noted, it must contain custom http header fields (that is, when the front-end request interface, if a custom field is added to the http header, the configuration must be written accordingly Field), you can see from the above that what I wrote is relatively long, I searched for some commonly used writing on the Internet, there are "web-token" and "app-token", this is set when the front-end request in my project , So I want to write here;
5. Access-Control-Expose-Headers , you don't need to set it. Looking at the Internet, it roughly means that only the 6 basic fields of the return header can be obtained by default. To get other extras, you can set it here to get it;
**6. The statement "if ($request_method ='OPTIONS') {", **Because the browser will first send an options request to the backend when judging whether to allow cross-domain requests, and then judge whether cross-domain requests are allowed according to the returned results , So here we judge this request separately, and then return directly;
Okay, it can basically be used according to my configuration above (some friends are sure that only Baidu has copied two lines, and then said that the configuration is complete, and talk to front-end friends),
Here is an actual configuration for reference, I made a few changes, as follows:
server {
listen 80;
server_name xxx.com;
location /xxx-web/papi {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
root html;
index index.html index.htm;
proxy_pass http://127.0.0.1:7071;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 5;
}
location /xxx-web {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
root html;
index index.html index.htm;
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 5;
}
location / {
root /var/www/xxx/wechat/webroot;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
add_header Access-Control-Allow-Origin *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
Follow the editor's WeChat public account, the program's Weibo , there are a lot of resources waiting for you,
