vue 多项目接入跨域问题

vue.config.js 文件

module.exports = {
  devServer: {
    port: 9095, //  项目启动的端口号
    open: true, // 配置项目在启动时自动在浏览器打开
    proxy: {
    	// 跨域的第一个项目
      '/yh': { // '/api'是代理标识,一般是每个接口前的相同部分
        target: "http://192.168.5.58:8002", // 请求地址,一般是服务器地址
        changeOrigin: true, // 是否进行跨域
        // pathRewrite: { // pathRewrite的作用是把请求接口中的 '/api'替换掉,一般是替换为空""
        //     '^/api':""
        // }
      },
      // 跨域的第二个项目
      '/yf': {
        target: "http://192.168.1.140:9001",
        changeOrigin: true,
        pathRewrite: {
          '^/yf': ""
        }
      },
      // 跨域的第三个项目
      '/yz': {
        target: "http://192.168.5.253:8031",
        changeOrigin: true,
        pathRewrite: {
          '^/yz': ""
        }
      }
    },
  }
};


跨域的第一个项目A:
接口:http://192.168.5.58:8002/yh/auth/login
跨域的第二个项目B:
接口:http://192.168.5.52:8021/api/v1.0/users/login
跨域的第三个项目C:
接口:http://192.168.5.253:8031/api/v1.0/users/login

我的项目还处理了一个问题:
就是配置proxy项目B 与项目C的时候,都是匹配/api,
需要做下区分:项目B添加/fy, pathWrite 为空; 项目C添加/fz, pathWrite 为空;
登录页请求的地址路径是:

//项目B
 axios({
            method: "post",
            url: "/yf/api/v1.0/users/login",
            data: yifuData,
          })

// 项目C

 axios({
            method: "post",
            url: "/yz/api/v1.0/users/login",
            data: yizhenData,
          })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中使用axios发起跨域请求存在以下几种解决方案: 1. 通过设置proxyTable代理解决跨域 在`config/index.js`中可以找到`dev`下的`proxyTable`属性,可以设置代理规则,如下所示: ``` module.exports = { dev: { // ... proxyTable: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '/mock' // 将/api替换为/mock } } } } } ``` 上面的代码中,代理规则中的`/api`表示需要代理的请求路径,`target`表示代理目标地址,`changeOrigin`表示是否改变请求头中的origin字段,`pathRewrite`表示路径重写规则。 2. 在服务器端设置CORS(跨域资源共享)策略 在服务器端设置CORS策略,允许指定的域名或IP地址访问API。具体的设置方法可以参考服务器框架的文档,比如,如果是使用Express框架,可以通过以下代码启用CORS: ``` const express = require('express') const app = express() app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'http://localhost:8080') // 允许访问的域名或IP地址 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') // 允许的请求方法 res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization') // 允许的请求头 res.header('Access-Control-Allow-Credentials', 'true') // 是否允许发送Cookie next() }) // 其他路由和中间件 ``` 3. 使用JSONP解决跨域 JSONP是一种跨域请求方式,只支持GET请求,但是需要服务器端支持。在Vue中可以使用vue-jsonp插件来实现JSONP请求,具体使用方法可以参考插件文档。 以上三种方法都可以解决Vue项目中使用axios发起跨域请求的问题,选择哪种方法取决于具体的应用场景和服务器端环境。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值