Vue解决axios跨域--代理服务器解决
1、跨域
是因为浏览器的同源策略引起的，是浏览器加的安全限制 -- 所以我们需要去解决这个问题
- 同源策略
拥有相同的协议、域名、端口号的网址间才可以相互访问资源。
- 解决跨域问题方法
JSONP跨域仅支持GET请求，一定要服务器支持才可以实现。（非官方，使用少，利用script标签进行跨域）只支持GET请求 CORS（Cross-Origin Resource Sharing）技术，需要后端设置http首部字节 。（官方）
第三种 -- 利用代理服务器解决 代理服务器有两种常用解决方法 ：1、Nginx 2、vue-cli 脚手架（我们讲这个） 8080端口需要去给5000/students发请求，使用代理服务器：下图就是一个代理服务器的图，vue-cli脚手架会打开会配置一个服务器在本机的 8080 端口，所以我们打开的页面就是8080端口的出现了跨域问题，是因为我们要去给 5000 端口发送请求，根据同源策略，浏览器会报错 所以我们需要一个代理服务器来处理，且代理服务器和网页的协议、域名、端口号是一样（即需要满足同源策略），网页与服务器间才会有同源策略，我们设置的代理服务器解决了同源策略，由于服务器与服务器之间没有跨域问题，所以跨域问题就解决了 流程：8080端口下的网页发请求 -> 8080端口代理服务器接收代理到（解决跨域） -> 5050端口服务器响应请求
2、开启代理服务器（方式一）
vue.config.js 配置
缺点: 1、只能代理一个服务器
2、如果 public 文件下有 students 文件，那么代理就出问题了，会直接请求该文件，不会去代理 5000/students
module.exports = {
devServer: {
// 代理服务器发送给 响应服务器
proxy: 'http://localhost:5000'
},
}我们使用axios库，下载该库打开vscode终端 ========== npm i axios
然后把引入这个axios到我们的vue文件里面使用 ======== import axios from "axios";
- 去代理服务器8080请求students内容
- 在 vue.config.js 里面开启代理服务
配置可以去官网 配置参考 | Vue CLI 参看，记得里面的代理是最终响应的 5000 端口的服务器
- 在终端重启一下8080端口 npm run serve （记得，因为改了vue.config.js内容）
- 方案缺陷
如果你 public 文件有 students 文件，则不会走代理，也就是该方案无法控制是否走代理
3、开启代理服务器（方式二）
配置可以去官网 配置参考 | Vue CLI 参看
开启代理服务器（方式二）
* 优点：1、可以代理多个服务
2、可以控制是否走代理 【走代理需要加 '/api'】
不加下面 pathRewrite ，代理服务器会直接去 5000/gbase/students 请求
devServer: {
proxy: {
'/gbase': {
target: 'http://localhost:5000',
pathRewrite: { '^/gbase': '' }, // *匹配 /gbase 改为空，然后代理服务器会直接去 5000/students 请求
// *下面不写，都是默认为true
// ws: true, // 用于支持websocket
// changeOrigin: true // 用于控制请求头中的host值
},
'/demo': {
target: 'http://localhost:5001',
pathRewrite: { '^/demo': '' },
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值
}
}
}
}- vue.config.js 使用方案二，可以使用多个代理
- Vue文件配置需要加 /api 头
- 结果获取成功
