vue代理解决跨域

vue设置代理跨域

通过伪造请求使得http请求为同源的,然后将同源的请求发送到反向代理服务器上,由反向代理服务器去请求真正的url,这样就绕过直接请求真正的url导致跨域问题

在config下新建proxyConfig.js 文件

module.exports = {
    proxy: {
        '/apis': {    //将www.exaple.com印射为/apis
            target: 'http://49.232.194.102:1024',  // 接口域名
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/apis': ''   //需要rewrite的,
            }
        }
    }
}

然后在同级的index.js文件内引入,并改写为

var proxyConfig = require('./proxyConfig')
module.exports = {
  dev: {

    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxy,
    cssSourceMap: false

也可以直接在index js文件内修改

proxyTable: {
     '/api': {                       //需要代理的接口
       target:'http://39.97.33.178', //目标服务器
       changeOrigin: true,       //是否跨域
       pathRewrite: {
         '^/api': '/api'             //重定向
       }
     }
   },

根据各自喜好进行代理

使用代理

代理前请求接口

var obj = {
          api : 'get',
          url: 'http://49.888.888.102:1024/RegisteredCheck',     // 注意这里
          data:{
              name:'sfsfsd',
              padd:'325536'
          },
           };
           this.$https(obj).then(res => {
               console.log(res)
          });

代理后

var obj = {
          api : 'get',
          url: '/apis/RegisteredCheck',     //  apis代理了  http://49.888.888.102:1024
          data:{
              name:'sfsfsd',
              padd:'325536'
          },
           };
           this.$https(obj).then(res => {
               console.log(res)
          });
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页