Vue 中 axios 跨域访问

1、假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口)

2、而开发地址为127.0.0.1:8080,当axios发起请求时,出现如下错误:

Failed to load http://www.test.com/apis/?&act=login: The value of the 'Access-Control-Allow-Origin' header
in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
Origin 'http://127.0.0.1:8080' is therefore not allowed access. The credentials mode of requests
initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

 

解决方法:
1、修改config/index.js, 修改 proxytable

    proxyTable: {
      '/apis': {
          target: 'http://www.test.com/apis/',  // 接口地址
          changeOrigin: true,  
          pathRewrite: {
              '^/apis': ''   //需要rewrite重写的,
          }              
      }
    },

2、重启 npm run dev    (很重要,否则不生效)

3、访问接口(访问时通过代理转发的,有点类似APACHE的urlrewrite,不需要完整http://www.test.com网址。)

                this.$api.get('/apis/index.php?act=login', {
                    "act": "login"
                  }, response => {
                       //success
                  },error => {
                       //error
                  }
                );

  

 

大功告成,成功解决错误,另外:PHP端不需要做任何的header设置,网上很多教程胡说八道,根本不能实现跨域

proxyTable: {
‘/apis’: {
// 测试环境
target: ‘http://www.test.com/apis/’, // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
‘^/apis’: //需要rewrite重写的,
}
}
},

posted on 2018-11-20 22:15 微先锋 阅读() 评论() 编辑 收藏

版权声明:本文为vxianfeng原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/vxianfeng/p/9992062.html