使用nginx解决浏览器跨域

什么是浏览器跨域？

跨域就是指浏览器具有同源策略，浏览器不会执行访问其它网址数据的js脚本，比如说访问其它网址的cookie数据，调用其它网址的api接口。

什么是同源？

协议，域名，端口均相同的情况下才算同源，只要有一个不同就不算同源。

跨域请求分类

跨域请求主要分类俩类，一种是简单请求的跨域，另外一种是非简单请求的跨域。

简单请求跨域

简单请求的请求方式为GET，HEAD，POST请求，而POST请求中只包含了text/plain，multipart/form-data，application/x-www-form-urlencoded这三种Content-Type。如果简单请求发生了跨域，那么浏览器会先将这次请求发送给后端api。如下图所示，浏览器已经接受到了后端接口的数据。

fiddler查看请求数据

如果这时候响应头中没有包含允许跨域的响应头，浏览器就不会将数据返回给ajax，并且给出了跨域提示。

简单请求跨域

非简单请求

除了简单请求的都是非简单请求，比如说POST请求中，Content-type为application-json。非简单请求跨域的时候，会先发送一个OPTIONS请求给后端，通过返回结果判断是否跨域。这时候如果发生了跨域，那么就不会将请求发送给后端api，并且浏览器给出跨域提示。

fiddler查看请求

nginx反向代理

使用nginx反向代理也能够解决浏览器跨域问题，我们可以将后端程序和前端程序的资源映射到同一个协议，域名和端口下的不同路径。

nginx配置

    server {
        listen       80;
        server_name  www.test.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
			root html;
			index index.html;
        }
		location /web/ {
                proxy_pass http://localhost:8182/;
        }
        location /api/ {
                proxy_pass http://localhost:8084/;
        }
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

配置完nginx之后，我们再次看到俩次请求的jsessionid一致，并且响应头没有配置跨域响应头。

login请求