vue跨域配置代理打包访问不到

项目场景:

vue配置代理解决跨域

问题描述

vue在config.js里的dev里配置了代理只是适用于开发环境,npm run dev 运行的就是dev里的东西,打包后自然访问不到

 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://xxxx:9000',----后台服务器----
        changeOrigin: true,
        logLevel: "debug",
        pathRewrite: {
          '^/api': ''
        }
      }
      }
    },

原因分析:

跨域:前端向服务器发送一个请求,由于协议,主机名,端口号造成浏览器跨域(服务器能返回数据,但是浏览器认为跨域不返回),所以开发环境里要配置个代理,这样前端比如http://localhot:8000/api发送请求会自动转到target值,再由target去访问服务器,协议ip端口全一样就不会跨域了,这也是为什么浏览器看到的请求接口是后台的,因为前端代理的


解决方案:1.将axios换成ajax发送请求,利用jsonp,jsonp只适用于get请求 2.配置代理,如上

      let that = this     ------这里用that定向this,可以解决浏览器有返回值但是渲染不出来的问题
       $.ajax({
         type: "get",
         url: window.GLOBAL_CONFIG['Url'] + '/api/MANGFU',
        success: function (data) {
           that.Data = data.data
       }
       })

解决打包方案:—针对配置代理— 部署项目nginx里配置代理服务器,相当于前端的开发环境下的代理原理一样,利用代理服务器发送请求就不会跨域,因为服务器与服务器间不存在跨域问题


```html
     location /api {
            proxy_pass  http://xxxx:9000;
        }





  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值