同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。

使用ajax时容易遇到跨域问题

nginx 反代解决CORS问题

就像这样

最好的方法自然是修改服务端代码,如php里的

header("Access-Control-Allow-Origin: blog.fifcom.cn"); // 允许指定域名跨域
header("Access-Control-Allow-Origin: *"); // 允许任意域名跨域

不过有时候无法修改服务端代码,这时候就需要用 nginx 反代来解决了。编辑 nginx.conf 并添加:

server 
{
	listen 443 ssl;
        # listen 80; # 如为http则监听80
	ssl on;
	ssl_certificate /path/pub.crt;    #ssl证书
	ssl_certificate_key /path/pri.key;#ssl私钥
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_ciphers HIGH:!aNULL:!MD5;
	server_name example-proxy.fifcom.cn; #你的反代域名
	location / {
	    proxy_pass https://example.fifcom.cn; # 被代理的域名(源站)
            proxy_http_version 1.1;
            # proxy_set_header Referer https://example.fifcom.cn; # 源站检测referer时需加上

            # 一些其他设置
            proxy_set_header X-Real-IP $remote_addr; 
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header REMOTE-HOST $remote_addr;
	    proxy_buffering off; 
	    proxy_cache off;
	    proxy_set_header X-Forwarded-Proto $scheme;

	    add_header X-Cache $upstream_cache_status;
            add_header Access-Control-Allow-Methods *; # 允许所有跨域方法
            add_header Access-Control-Max-Age 3600; # 缓存,否则会发送两次请求
            # add_header Access-Control-Allow-Credentials true; # 请求包含cookie时要开启
            add_header Access-Control-Allow-Origin $http_origin;
            # 允许客户端跨域,不用*是因为请求包含cookie时不支持允许所有

            add_header Access-Control-Allow-Headers $http_access_control_request_headers; # 自动配置允许的header
            if ($request_method = OPTIONS){
                return 200;
                # 判断请求类型是否为预检命令
            }
	    proxy_set_header Host example.fifcom.cn; # 设置host为源站
	}
}

在前端js代码里可以将源站替换为反代域名

url = url.replace('example.fifcom.cn(源站域名)', 'example-proxy.fifcom.cn(反代域名)');

保存后需要重启nginx

总结下,当无法修改服务端代码时需要使用nginx搭一个反代,并添加允许跨域的相关配置