vue2.6之处理跨域
2020-07-14 05:51
260 查看
我的个人网站 www.ryzeyang.top
内容概览
在vue.config.js中处理跨域问题
目录
介绍
跨域是是由浏览器的同源策略造成的,同源策略是一个安全措施!能减少XSS、CSFR等的攻击。
同源是指,域名,协议,端口均相同
出现跨域 的原因 就有
- 协议不同
- 域名不同
- 端口不同
处理
之前在java后端项目中,只要加个注解@CrossOrigin就可以解决这个问题,当然也可以通过Nginx做反向代理就好了,但是现在需要在前端解决
怎么解决呢?
-
回到我们之前使用过的 webpack 。
webpack官网之devServer
在vue.config.js中配置如下代码即可
module.exports = { configureWebpack: { devServer: { proxy: { '/api': { // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 // 将/api开头的url转发到target上。 target: 'http://192.168.101.110:8888', changeOrigin: true, ws: true // , // pathRewrite: { // 顾名思义,将/api重写为 / 此时url变为 http://192.168.101.110:8888/ 而不是 http://192.168.101.110:8888/api // '^/api': '/' // } } } } } }
参考链接
https://segmentfault.com/a/1190000011145364
相关文章推荐
- vue-cli3+node项目跨域请求处理
- 如何部署vue前端项目到服务器上(nginx处理跨域)
- vue proxyTable跨域处理
- webpack+vue-cil中proxyTable处理跨域的方法
- 利用Nginx处理Vue开发环境的跨域的方法
- vue-cli构建的项目中axios的请求方式及跨域处理
- vue proxyTable 接口跨域请求问题处理
- 关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题
- vue-cli项目跨域处理
- Vue项目里跨域处理方法
- vue 使用 axios 跨域处理
- 关于Vue/axios下跨域cookie的处理
- vue-cli axios请求方式及跨域处理问题
- 跨域 webpack + vue-cil 中 proxyTable 处理跨域
- vue2.0 本地跨域处理
- 在vue项目中,使用axios跨域处理
- vue利用axios处理开发环境和生成环境的跨域问题
- vue-cli3配置与跨域处理方法
- vue.js处理跨域问题
- 关于vue项目中,axios请求方式,跨域请求的处理