前端Vue项目处理跨域请求问题解决方案(后端未加cors),前端调后端

vue.config.js中加,自己修改后端服务服务器地址和端口号
 

module.exports = {
    devServer: {
    port: 80,
    https: false,
    open: true,
    proxy: {
      "/test": {  // 代理标识(匹配以 /test 开头的请求)
        target: "http://xxx",  // 目标服务器地址
        changeOrigin: true,                   // 允许跨域
        pathRewrite: {
          "^/test": ""  // 去掉请求路径中的 /test 前缀
        }
      }
    },
    disableHostCheck: true
  }
}

api文件夹下的index.js或你命名的api.js文件修改你请求的接口地址为,xxx是域名端口后的后台接口地址:

export function get_data(data) {
  return request({
    url: `/test/xxx`, //xxx是域名端口后的后台接口地址
    method: "get",
    params: data,               // 保留参数传递
    timeout: 50000,
  });
}

但以上仅限于在开发环境中解决跨域和同源策略阻挡问题,前端项目打包部署nginx时,还需要在nginx的conf文件中配置反向代理,把所有原本直接请求 http://xxx.com 你自己后端服务器服务的代码,改为通过代理路径 /test 发起请求,从而绕过浏览器的同源策略阻挡
要在前端部署的nginx的conf的配置文件中加上反向代理地址

location /test {
    rewrite ^/test/(.*)$ /$1 break;
    proxy_pass http://xxx;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值