前后端分离_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:{}})

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

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

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

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

}

最后贴张控制台的图，最后要说的就是这只是开发环境本地跨域的设置，上线模式更加复杂。