Shulou(Shulou.com)05/31 Report--

How to solve the cross-domain problem of Nginx and cross-domain configuration of CORS is not very clear to many beginners. In order to help you solve this problem, the following editor will explain it in detail. People with this need can come and learn. I hope you can get something.

Nginx's CORS configuration is too much on the Internet, but more copy, paste and forward are almost similar to the following three or two lines: first, I don't know much about this configuration, so I don't have the energy to know too much, but I think there are some key notes that some beginners may not notice, resulting in configuration problems.

Add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers XmurRequestedMuffle Access-Control-Allow-Methods GET,POST,OPTIONS with addtional header

Does this work? Useful. I used to use it like this before, but then I still encountered problems. I found that some project requests were unsuccessful, some browsers were successful, and some browsers were unsuccessful.

I also look up all kinds of information and adjust the writing method on the Internet, and finally I adjust the writing method, the basic use is no problem, I have been using it in the project!

The following is a partial configuration of my actual project:

Location / aoda-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' 0x 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;}

Cross-domain related configurations are mainly the following:

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' 0x return 204;}

The following is a brief explanation, so that everyone's configuration is successful!

1. Access-Control-Allow-Origin. Here we use the variable $http_origin to get the current source domain. People say that "*" means to allow all. My actual use is not successful, and the reason is unknown.

2. Access-Control-Allow-Credentials. When true, you can bring Cookie to the request. Configure it on a case-by-case basis.

3. Access-Control-Allow-Methods,OPTIONS must be available. In addition, it is usually only GET and POST. If you have other ones, you can also add them.

4. Access-Control-Allow-Headers, this should be noted that it must contain a custom http header field (that is, if a custom field is added to the http header when the frontend request API is made, the corresponding field must be written here). As you can see from the above, what I wrote is rather long. I searched the Internet for some commonly used fields, including "web-token" and "app-token". This is set by the front-end request in my project, so I'm going to write it here

5. Access-Control-Expose-Headers, but do not set it. If you look on the Internet, it roughly means that you can only get the 6 basic fields returned by default. To get other additional fields, you can only get it by setting it here.

6. The statement "if ($request_method = 'OPTIONS') {", because when the browser judges whether cross-domain is allowed, it will first send an options request to the back end, and then judge whether the cross-domain request is allowed based on the returned result, so the request is judged separately here, and then returned directly.

All right, basically all can be used according to my above configuration (some friends make sure that only Baidu has copied two lines, and then say that the configuration is ready and talk to each other with the front-end friends)

The following is an actual configuration for reference. I have made a few changes as follows:

Server {listen 80th serverroomname 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' 0x 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' 0x 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 500502503504 / 50x.htmlplace location = / 50x.html {root html;}} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.