这两天一直搞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";
}
最后贴张控制台的图,最后要说的就是这只是开发环境本地跨域的设置,上线模式更加复杂。