【怎么可能】nginx配置跨域报错：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

今日份报错记录：nginx配置跨域报错

一、什么是跨域呢？

以我自己的理解就是:浏览器从⼀个域名的⽹⻚去请求另⼀个域名的资源时，域名、端⼝、协议任⼀不同，都是应该属于跨域哈。
所以我们尝试跨域的时候就会报一下问题：
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

为了解决以上问题，我们需要保证

• 协议相同 http、https
• 域名相同 www.xdclass.net
• 端⼝相同 80 88

同时Nginx开启跨域配置

location /api/ {
		add_header 'Access-Control-Allow-Origin' $http_origin;
    	add_header 'Access-Control-Allow-Credentials' 'true';
		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-Allow-Methods 'GET,POST,OPTIONS';
		#预检请求
		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 200;
		}

如果你的配置是这样的：

location /api/ {
		add_header 'Access-Control-Allow-Origin' '*';
    	add_header 'Access-Control-Allow-Credentials' 'true';
		add_header Access-Control-Allow-Methods 'GET,POST';
		#那么你应该这样,使用以下配置应该就会生效了。
		
		if ($request_method = 'OPTIONS') {
		add_header 'Access-Control-Allow-Origin' $http_origin;
    	add_header 'Access-Control-Allow-Credentials' 'true';
		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-Allow-Methods 'GET,POST,OPTIONS';
		add_header 'Access-Control-Max-Age'1728000;
		add_header 'Content-Type''text/plain; charset=utf-8';
		add_header 'Content-Length' 0;
		return 200;
		}
		if ($request_method = 'GET') {
		add_header 'Access-Control-Allow-Origin' $http_origin;
    	add_header 'Access-Control-Allow-Credentials' 'true';
		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-Allow-Methods 'GET,POST,OPTIONS';
		add_header 'Access-Control-Max-Age'1728000;
		add_header 'Content-Type''text/plain; charset=utf-8';
		add_header 'Content-Length' 0;
		return 200;
		}
		if ($request_method = 'POST') {
		add_header 'Access-Control-Allow-Origin' $http_origin;
    	add_header 'Access-Control-Allow-Credentials' 'true';
		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-Allow-Methods 'GET,POST,OPTIONS';
		add_header 'Access-Control-Max-Age'1728000;
		add_header 'Content-Type''text/plain; charset=utf-8';
		add_header 'Content-Length' 0;
		return 200;
		}
		

以上内容只是个人遇到的解决办法，可能不适用任何人，如果遇到相同问题，同样的办法没解决的，那就点个赞，把你的解决办法留下。