什么是同源策略？

“同源政策”是浏览器安全的基石，其设计目的是为了保证信息安全，防止恶意的网站窃取数据。所谓“同源”必须满足以下三个方面：

• 协议相同
• 域名相同
• 端口相同（默认端口是80，可以省略）
  当我们让浏览器打开一个网页的时候，浏览器首先会解析网址。比如：

https://17bang.ren/Article/Category-1?size=50&sort=Asc

就会被解析成：

• 协议（protocol）：https
• 域名（domain）：17bang.ren
• 路径（path）：/Article/Category-1
• 参数（parameter）：size=50&sort=Asc
  其实，这里面还隐藏了一个端口（port），看这个网址：

http://localhost:58545/Register

localhost也算是一个域名（地址），冒号后面跟的就是端口：58545，默认的

• http协议，端口80
• https协议，端口443

什么叫跨域？

浏览器有一个重要的安全策略，称之为「同源策略」，域名、协议、端口三者有一个不一样就是跨域。

跨域问题是在怎么产生的？

因为浏览器有一个安全机制，叫做同源策略。同源呢就是指域名、协议、端口都一致。如果任意一项不一致就是不同源，简单来说就是，你的网页的url和你调用的接口的url不是同一个地方的，浏览器觉得有安全风险，不想让你使用接口的数据。就好像你想去肯德基吃饭，非要点一碗兰州拉面，店员虽然很鄙视你，但是他还是给兰州拉面馆打了电话，问了一下，兰州拉面给你做面送到了肯德基，但是肯德基店员不给你拉面，所以你在肯德基吃不到兰州拉面。这里有一个很反常的操作，一定要注意一下，就是肯德基的店员打电话给兰州拉面馆了。这时，这个店员就相当于是浏览器，肯德基就相当于当前网页，兰州拉面馆就相当于是就接口的服务器，肯德基和兰州拉面不是同一个老板，相当于是不同源，兰州拉面就是你想要的接口数据。

解决跨域问题的方案：

1、 CORS处理（后端）所有的网站都可以访问这个接口（数据不安全）
2、 JSONP处理（前端），利用script标签的src属性实现跨域（script标签的src属性能够实现天然的跨域）比如拿到百度的一张图片（问题：只能处理get请求）
3、 Nginx 反向代理
4、 使用webpack可以做代理，实现跨域（是目前比较好的跨域处理方案，95%的公司是使用这个来做代理的）

Webpack为什么能够解决跨域问题

• webpack proxy , 就是webpack提供的解决跨域的方案。
• 其基本行为是接受客户端发送的请求后转发给其他的服务器，目的是为了便于开发者在开发的模式下解决跨域的问题。
• 要想实现代理必须要一个中间服务器，webpack提供服务器的工具是webpack-dev-server，只适用于开发阶段。

// ./webpack.config.js
const path = require('path')
  devServer: {
        // host: '0.0.0.0',
        hot: true, /* 开启热点 */
        inline: true, /* 开启页面自动刷新 */
        progress: true, /* 显示打包的进度 */
        disableHostCheck: true,
        // port:8080,
        open: true,
        watchOptions: {
            aggregateTimeout: 300
        },
        proxy: {
            '/api': {
                // target: 'http://100.64.34.171:8081', /* 后台服务器地址 */
                target: 'http://127.0.0.1:8086',
                hot: true,
                ws: false,
                changeOrigin: true
                 /* pathRewrite: {
                    '^/api': '' // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
                }*/
            }
        }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

• target:表示代理到的目标地址
• pathWrite:默认情况下，我们在/api也会被写到url中，希望删除，需要配置
• secure默认情况下不接受转发到https服务器上，如果需要，设为false
• changeOrigin: 它是表示是否更新代理后请求的 headers 中的 host 地址

(4)实现原理

在开发阶段，webpack-dev-server会自动启动一个本地开发服务器，我们应用在开发阶段是独立运行在localhost的一个端口上的，而后端服务器又运行在另一个地址上，由于同源策略，会出现跨域。所以使用代理，【浏览器发送请求】—> 【中间服务器】---->【服务器】； 服务器和服务器之间是不会存在跨域资源问题.