跨域

什么是跨域

跨域是指浏览器因安全策略限制，阻止一个域下的网页访问另一个域下的资源。

一些常见的跨域情况：

协议不同

从 http://example.com 请求 https://example.com。域名不同

从 http://example.com 请求 http://anotherdomain.com。端口不同

从 http://example.com:80 请求 http://example.com:8080。子域不同

从 http://sub.example.com 请求 http://another.example.com。顶级域名不同

从 http://example.com 请求 http://example.org。

这些情况都会触发浏览器的同源策略，导致跨域问题。

为什么会有跨域

浏览器的安全机制，防止不同来源的恶意脚本窃取数据。

如何解决跨域

CORS（跨域资源共享）

通过服务器设置响应头，允许特定域的访问。JSONP

通过

nginx配置

<code> server {

listen 7963;

server_name localhost;

location / {

root html;

index index.html index.htm;

# 添加 CORS 头部

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

# 处理预检请求

if ($request_method = 'OPTIONS') {

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

add_header Content-Length 0;

add_header Content-Type text/plain;

return 204;

}

}

查看服务器是否支持跨域

如果服务不支持跨域，再怎么设置nginx的请求头都是不行的！

如果服务不支持跨域，再怎么设置nginx的请求头都是不行的！

如果服务不支持跨域，再怎么设置nginx的请求头都是不行的！

如何查看服务器是否支持跨域

以 https://cn.bing.com/?mkt=zh-CN 为例

打开之后按下F12 ，切换到网络，刷新网页

滑倒最上面，看响应头中是否有：Access-Control-Allow-Origin *

或者使用post man，找一下有没有：<code>Access-Control-Allow-Origin *;， 有就是允许，没有就是不允许

很明显bing不允许。

允许的情况会：