前端使用Vue框架解决跨域问题

        现在项目开发,都实现前后端分离开发,导致前端向后端发送请求,会出现跨域错误 ;如何解决这个问题?

       方法一:后端可以下载cors包,对指定的前端域名允许请求;具体操作可以自行百度;

      今天主要介绍的是前端人员不用去麻烦后端人员,就可以通过前端设置实现跨域请求;

     方法二:前端设置服务器代理;

               本人用的是脚手架vue-cli 3.x版本下的Vue框架;导致没有了vue-cli 2.x版本的build和config文件夹;

我的项目目录如下:              

                                   图片   ;

很多前端的朋友们就会纳闷,原先在vue-cli 2.x版本的config文件夹,中配置服务器代理;现在没有了config文件,我怎么配置了?

对于vue-cli 3.x版本配置服务器代理,可以在根目录下建立一个vue.config.js的文件;(一定要记住是根目录);

建好以后文件目录如下:

                                  

在vue.config.js的空文件中,自行添加如下代码:

注意如下:target对应的属性值为你准备向后端服务器发送请求的主机+端口,含义为:相当于把前端发送请求的主机+端口自动替换成挂载的主机和端口,这样前后端的主机端口都一一就不会存在跨域问题;

ws:表示WebSocket协议;changeOrigin:true;表示是否改变原域名;这个一定要选择为true;

    这样发送请求的时候就不会出现跨域问题了。

  若想要设置跟多服务器代理,可自行去官方文档查看:https://cli.vuejs.org/zh/config/#devserver

 

  • 6
    点赞
  • 75
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
Vue.js 本身并不直接处理CORS跨域问题,因为这通常是服务器端的配置问题,与前端框架无关。但是,当在Vue应用中进行API请求时,特别是使用axios等库进行HTTP通信时,可能会遇到跨域限制。Vue2可以通过以下几种方式来间接解决这个问题: 1. **JSONP(不推荐)**:在后端支持下,通过动态创建`<script>`标签并设置`src`属性为服务器提供的JSONP接口,这种方式适用于GET请求且目标域名与当前域名同源的情况。 2. **代理(推荐)**:在开发阶段,可以利用`vue-cli`的`proxyTable`配置,将所有针对非同源API的请求代理到同一域名或特定路径的服务器上。这需要在开发服务器启动时开启。 ```json // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'https://your-backend-server.com', // 要代理的目标URL changeOrigin: true, ws: true, // 如果是WebSocket请求 pathRewrite: { '^/api': '' } // 重写请求路径 } } } } ``` 3. **CORS服务器中间件**:在生产环境中,后端应用需要设置CORS头来允许跨域请求。比如在Node.js的Express中,可以添加以下中间件: ```javascript app.all('*', function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With'); // 其他CORS相关的头部设置 next(); }); ```
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值