什么是浏览器跨域?
跨域就是指浏览器具有同源策略,浏览器不会执行访问其它网址数据的js脚本,比如说访问其它网址的cookie数据,调用其它网址的api接口。
什么是同源?
协议,域名,端口均相同的情况下才算同源,只要有一个不同就不算同源。
跨域请求分类
跨域请求主要分类俩类,一种是简单请求的跨域,另外一种是非简单请求的跨域。
简单请求跨域
简单请求的请求方式为GET,HEAD,POST请求,而POST请求中只包含了text/plain,multipart/form-data,application/x-www-form-urlencoded这三种Content-Type。如果简单请求发生了跨域,那么浏览器会先将这次请求发送给后端api。如下图所示,浏览器已经接受到了后端接口的数据。
如果这时候响应头中没有包含允许跨域的响应头,浏览器就不会将数据返回给ajax,并且给出了跨域提示。
非简单请求
除了简单请求的都是非简单请求,比如说POST请求中,Content-type为application-json。非简单请求跨域的时候,会先发送一个OPTIONS请求给后端,通过返回结果判断是否跨域。这时候如果发生了跨域,那么就不会将请求发送给后端api,并且浏览器给出跨域提示。
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一致,并且响应头没有配置跨域响应头。