前后端分离_Vue_axios本地跨域（前端localhost:8080到后端localhost:80）

       这两天一直搞vue的前后端分离，其中绕不开的就是axios跨域问题，然后找了好多axios的本地跨域文章，跟着设置也会报没有访问权限的错，最后还是找到了本地跨域配置方法。

1.首先配置vue

在main.js加入

import Axios from "axios"

Vue.prototype.$axios = Axios

Axios.defaults.baseURL = "http://127.0.0.1/"     //配置默认发送请求到http://127.0.0.1/，可改或者加端口号

 

2.接着配置config/index.js，找到proxyTable

 proxyTable: {
        '/api': {
            target: 'http://127.0.0.1/',//设置调用的接口域名和端口号（默认端口号80）
            changeOrigin: true,
            pathRewrite: {'^/api': '' }
              //这里理解成用‘/api’代替target里面的地址，
              //后面组件中我们掉接口时直接用api代替 
              //比如我要调用'http://40.00.100.100:3002/user/add',
              //直接写‘/api/user/add’即可
        }

    },

3.如果是开发模式就可以在config/dev.env.js配置

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:"/api/"

})

 

4.发送请求

this.$axios.get("/ThinkPHP5.0/public/index.php/admin/Index/lalala",{params:{}})

    .then(response =>{console.log(response);

现在前端配置已经好了，但是如果就这样的话，控制台会报错，说你没有权限（Response to preflight request doesn’t pass access control）

最后一步就是在后端接口加一个 header("Access-Control-Allow-Origin: *");表示接受任何访问，举一个例子。

*可以改成某个网址，这样就只有这个网址才可以访问这个接口

public function lalala(){
        header("Access-Control-Allow-Origin: *");
return "123";

}

最后贴张控制台的图.

这些全是去年我自己的理解写的，但现在的想法比较全。跨域这个东西不是前端的锅，有跨域说明是后端的cors没有设置好，并且上面的代理（proxyTable）其实没什么用，真正有用的是设置axios.defaults.baseURL 

if (process.env.NODE_ENV === 'production') {

    // 生产环境,线上环境

    axios.defaults.baseURL = 'http://production.test.ink';

} else if (process.env.NODE_ENV === 'test') {

    // 测试环境

    axios.defaults.baseURL = '';

} else if (process.env.NODE_ENV === 'development') {

    // 开发环境

    axios.defaults.baseURL = 'http://development.test.ink';

}

设置完之后会根据你的环境自动配置发送请求的地址，本地和线上是一样的，不需要改动代码，打包好直接丢给后台同学

只要后台同学设置好cors，本地和线上其实没什么两样