什么是浏览器跨域?

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

什么是同源?

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

跨域请求分类

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

简单请求跨域

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

nginx配置后api nginx配置后put请求跨域_跨域

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

nginx配置后api nginx配置后put请求跨域_html_02

非简单请求

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

nginx配置后api nginx配置后put请求跨域_nginx配置后api_03

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一致,并且响应头没有配置跨域响应头。

nginx配置后api nginx配置后put请求跨域_跨域_04

nginx配置后api nginx配置后put请求跨域_跨域_05

.