对跨域问题的总结

什么是跨域？
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任意一项不同，都是跨域。
以http://www.test.com/index.html为例
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 协议不同(https)
http://www.test.com:90/index.html 不同源 端口不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)

为什么会出现跨域？
跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，才允许相互访问。（针对js和ajax）
前后端分离时，请求的域名和本地不一致，就会出现跨域问题。

如何解决跨域？
webpack-dev-server

什么是dev-server？
The webpack-dev-server is a little node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle
简单理解为是一个服务器

DevServer的功能有哪些？
提供 HTTP 服务而不是使用本地文件预览
监听文件的变化并自动刷新网页，做到实时预览
支持 Source Map，以方便调试

DevServer是如何解决跨域的？
devserver通过本地虚拟出一个服务器，将本地请求代理到target对应域名下进行请求。

配置跨域代理
1：先在项目的根目录下新建 vue.config.js 文件
2：在module.exports内设置devServer来处理代理
devServer: {
proxy: {
‘/api’: {
//要访问的跨域的域名
target: ‘http://www.test.com’,
ws: true, // 是否启用websockets
//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据 的交互就不会有跨域问题
changOrigin: true,
}
}
}