[TOC]

19、同源策略跨域
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
所谓同源是指：域名、协议、端口相同。
同源策略又分为以下两种：
1DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
2XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

为什么要有跨域限制
因为存在浏览器同源策略，所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到，跨域限制主要的目的就是为了用户的上网安全。
如果浏览器没有同源策略，会存在什么样的安全问题呢。下面从 DOM 同源策略和 XMLHttpRequest 同源策略来举例说明：
如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问：
如果 XMLHttpRequest 同源策略，那么黑客可以进行 CSRF（跨站请求伪造） 攻击：

1.jsonp
在页面上有三种资源是可以与页面本身不同源的。它们是：js脚本，css样式文件，图片
而jsonp就是利用了
6


(2)使用ajax实现jsonp跨域：

JavaScript
复制代码

1

●JSONP跨域的缺点 JSONP只能解决get请求，不能解决post请求。
jsonp： https://www.cnblogs.com/digdeep/p/4170059.html

2.CORS 跨域资源共享
这个主要在服务端使用node的时候进行配置。
通过设置响应头配置了CORS跨域。主要设置以下几个属性。

JavaScript
复制代码

1
app.all(““,function(req,res,next){
2
//设置允许跨域的域名，代表允许任意域名跨域
3
res.header(“Access-Control-Allow-Origin”,”*”);
4
//允许的header类型
5
res.header(“Access-Control-Allow-Headers”,”content-type”);
6
//跨域允许的请求方式
7
res.header(“Access-Control-Allow-Methods”,”DELETE,PUT,POST,GET,OPTIONS”);
8
if (req.method.toLowerCase() == ‘options’)
9
res.send(200); //让options尝试请求快速结束
10
else
11
next();
12
});

3.webpack 中 配置webpack-dev-server

JavaScript
复制代码

1
devServer: {
2
proxy:{
3
‘/api’:{
4
target:’http://localhost:3000‘, //请求域名
5
changeOrigin: true, //是否跨域
6
pathRewrite:{‘/api’:’’}
7
}
8
}
9
},

4.使用Nginx进行跨域（Nginx反向代理）
这个时候我们手里只有html、css、js等静态文件，后台接口地址都会访问不到。这个时候Nginx就登场了，Nginx反向代理配置和Webpack大同小异，匹配到动态的地址时将请求转发到一个服务器地址实现跨域。

JavaScript
复制代码

1
server {
2
listen 3000; //监听的本地端口
3
server_name localhost;
4

5
location /api { //匹配到/api开头的接口时，转发到下面的服务器地址
6
root html;
7
proxy_pass http://192.168.xxx.xxx:8080; //服务器地址
8
}
9

10
location =/ {
11
root html;
12
index index.htm index.html; //默认主页
13
}
14

15
# 所有静态请求都由nginx处理，存放目录为html
16
location ~ .(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {
17
root html; //配置静态资源地址
18
}
19

20
error_page 500 502 503 504 /50x.html;
21
location = /50x.html {
22
root html;
23
}
24
}