1200字范文 > Nginx解决前端跨域问题 Nginx反向代理跨域原理

Nginx解决前端跨域问题 Nginx反向代理跨域原理

时间：2020-11-12 19:13:13

================================

©Copyright 蕃薯耀-10-09

蕃薯耀的博客_CSDN博客

一、Nginx前端Ajax非简单请求跨域问题

1、Ajax非简单请求会提示跨域

Access to XMLHttpRequest at ':7001/csgx/jiHuaMap/test' from origin 'http://127.0.0.1:9000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

headers中"Content-Type" : "application/json"就是非简单请求

如下：

$("#btnTest").click(function(){$.ajax({ url : "http://127.0.0.1:10001/csgx2/jiHuaMap/test?ssotoken=xxx", type : "post", dataType : "json", headers: {"Content-Type" : "application/json"},data : '{"id":"uuid", "bb": 10}', complete : function(XMLHttpRequest, textStatus){ //console.log("textStatus="+textStatus);}, error : function(XMLHttpRequest, textStatus, errorThrown){ if("error" == textStatus){ console.error("服务器未响应，请稍候再试");}else{ console.error("请求失败，textStatus=" + textStatus);} }, success : function(data){ console.log(data);} }); });

2、简单请求

只要同时满足以下条件就属于简单请求

1、请求方法是以下三种方法之一：GET、POST、HEAD

2、Http的头信息不超出以下几种字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type。

Content-Type只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain

3、非简单请求

会预检请求 (preflight request)，即先预发送OPTIONS的请求

第一次是浏览器使用OPTIONS方法发起一个预检请求，第二次才是真正的异步请求

第一次的预检请求获知服务器是否允许该跨域请求：如果允许，才发起第二次真实的请求；如果不允许，则拦截第二次请求。

Access-Control-Max-Age用来指定本次预检请求的有效期，单位为秒，在此期间不用发出另一条预检请求。

二、通过Nginx反向代理解决Ajax非简单请求跨域问题

1、nginx.conf 配置文件在 http 模块最上面引入相应的配置文件：

include config/*.conf;

引入具体如下：即新建立一个config文件夹，在文件夹下建立新的配置文件

如：10001-csgx-cross.conf

server {listen 10001;#server_name localhost;location /csgx {proxy_pass http://127.0.0.1:9000/csgx;#rewrite ^/csgx/(.*)$ /$1 break;#proxy_redirect off;proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; #关键需要在此处添加端口号变量,或者直接使用端口号8070proxy_set_header X-Forwarded-HOST $host:$server_port; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}location /csgx2 {# 表示允许这个域跨域调用（客户端发送请求的域名和端口） # $http_origin动态获取请求客户端请求的域不用*的原因是带cookie的请求不支持*号#add_header Access-Control-Allow-Origin $http_origin;add_header Access-Control-Allow-Origin *;# 指定允许跨域的方法，*代表所有add_header Access-Control-Allow-Methods *;#带cookie请求需要加上这个字段，并设置为trueadd_header Access-Control-Allow-Credentials true;# 预检命令的缓存，如果不缓存每次会发送两次请求add_header Access-Control-Max-Age 3600;#add_header 'Content-Type' 'text/plain charset=UTF-8';#add_header 'Content-Length' 0;# 表示请求头的字段动态获取add_header Access-Control-Allow-Headers $http_access_control_request_headers;proxy_set_header Host $host:$server_port;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass :7001/csgx/;if ($request_method = 'OPTIONS') {return 200;}}}