vue中的跨域问题

vue跨域解决方法

vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“请求资源上没有'Access-Control-Allow-Origin'标头”这种跨域错误。

要想本地正常的调试，解决的办法有三个：

一、后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 

二、使用jquery的提供的jsonp（注：vue中引入的jquery，自行百度）这样就可以跨域请求数据了。

methods: { 
    getData () { 
        var _this = this 
        $.ajax({ 
              url: 'http://xxx.com/xxx', 
              type: 'GET', 
              dataType: 'JSONP', 
              success: function (res) {    
    
              } 
         }) 
    } 
}

三、使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）。

例如请求接口的url：“http://www.xxx.com/login”

1.打开配置文件config/index.js，在proxyTable中添写如下代码：

proxyTable: { 
    '/api': {  //使用"/api"来代替"http://www.xxx.com" 
         target: 'http://www.xxx.com', //源地址 
         changeOrigin: true, //改变源 
         pathRewrite: { 
             '^/api': '' //路径重写 
         } 
    } 
}

2.接口统一管理

let host = '/api/'
let urls = key => {
    return host + {
        'login': 'login',//登录接口
    }[key]
}

axios.get(urls('login'),function(data){
    
})

=>Vue-cli3.x

vue.config.js

proxy: {
    '/api': {
        target: 'http://www.baidu.com',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}