1. 云栖社区>
  2. PHP教程>
  3. 正文

vue-cli教程(五) 网络请求与跨域问题解决

作者:用户 来源:互联网 时间:2017-11-30 15:46:43

问题网络教程cli解决vue请求

vue-cli教程(五)  网络请求与跨域问题解决 - 摘要: 本文讲的是vue-cli教程(五) 网络请求与跨域问题解决, 网络请求采用jquery,Axios vue-resource都可以,这里采用vue-resource 安装:cnpm install vue-resource 建立server/index.js import Vue from 'vue

网络请求采用jquery,Axios vue-resource都可以,这里采用vue-resource


安装:cnpm install vue-resource


建立server/index.js


import Vue from 'vue'
import vueresource from 'vue-resource'
Vue.use(vueresource);
//以form的形式提交post,如果不加这个参数,在php端需要以 file_get_contents("php://input")获取参数
Vue.http.options.emulateJSON = true;
const net = {
BASE_PATH:"/api",
get_data:function (params) {
return Vue.http.get(this.BASE_PATH+"/b.php")
}
};
export default net;

在模板使用:








此时点击获取时,会出现跨域问题:(js报错)


XMLHttpRequest cannot load http://localhost/api/b.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.


调试的解决方案:


在config/index.js 下配置 30 行的 proxyTable


proxyTable: {
//可配置多个规则
'/api': {
target: 'http://localhost',//服务器端地址
changeOrigin:true,//忽略请求的origin
pathRewrite: {
'^/api': '/test/api' //url重写规则,可以配置多个
}
}
},

配置成功后重启才会生效 !!!!!!


在服务器端的解决方案:


配置nginx反向代理,或者打包后和后端服务器代码放一起

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索问题 , 网络 , 教程 , cli , 解决 , vue 请求 ,以便于您获取更多的相关知识。