跨域
什么是跨域
跨域是指浏览器因安全策略限制,阻止一个域下的网页访问另一个域下的资源。
一些常见的跨域情况:
- 协议不同
从 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配置
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,找一下有没有:Access-Control-Allow-Origin *;
, 有就是允许,没有就是不允许
很明显bing不允许。
允许的情况会: