1.在config =》index.js中找到 module.exports =》dev =》proxyTable
在proxyTable中添加
'/api': {//匹配所有以'/api'开头的请求路径
target: 'https://qqqq.com/',//后端接口地址,可以是域名,也可以是ip
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/api': '',//重写路径:去掉路径中开头的'/api'
}
}
2.在需要用到跨域的页面添加
methods:{
post:function(){
fetch("/api/vueindex",{ // /api 这个就是第一步中定义的域名
method:"post",
body:JSON.stringify(this.blog) //注意传值方式 JSON.stringify
}).then(result=>{
return result.json()
}).then(data=>{
console.log(data)
})
}
}
3.在后端接受方式,php
$request = isset($GLOBALS['HTTP_RAW_POST_DATA']) ? $GLOBALS['HTTP_RAW_POST_DATA'] : file_get_contents("php://input");
$request = urldecode($request);
$request = json_decode($request,true);
这样就可以了
上面设置跨域是前端Vue设置的方法
但是我们在开发和线上正式部署的时候,请求的后端接口一般是不在一个服务器上的,这是只需配置一下
1.在config/dev.env.js下配置开发环境的API_ROOT
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./dev.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"/api"' //本地请求前缀,这个前缀和上面跨域配置的要一致
})
2.再config/prod.env.js下配置生产环境的API_ROOT
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"production"',
API_ROOT: '"https://www.prov.com"' //线上请求前缀
})
3.在需要调用的地方
const baseUrl = process.env.API_ROOT;
baseUrl+'/receive_address'
这样就解决了开发和生产环境的不同带来的问题
再介绍一种后端解决的方法,后端解决起来很简单
在需要允许跨域的控制器的namespace下面加上
header("Access-Control-Allow-Origin:*"); //*是允许所有域名跨域,如果只想指定某一个域名跨域,就将 * 改成 http://12.12.12.12:85 你自己的域名
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
上面说了post请求数据的发送方式以及php的接受方式
get请求数据的方法
this.$http.get("https://12.12.12.12/vueindexsingle/?id=" + this.id)
.then(function(data){
this.blog = data.body;
})
接受的方法:
public function vueindexsingle(Request $request){
$id = $request->param('id');
$data = Db::name('vue')->find(['id'=>$id]);
$data['categories'] = explode(',',$data['categories']);
return json($data);
}
delete请求数据的方法,和post方法一样
fetch("https://12.12.12.12/deleteSingleBlog",{
method:"delete",
body:JSON.stringify(this.id)
}).then(result=>{
return result.json()
}).then(data=>{
console.log(data)
})
接收数据的方法
$request = isset($GLOBALS['HTTP_RAW_POST_DATA']) ? $GLOBALS['HTTP_RAW_POST_DATA'] : file_get_contents("php://input");
$request = urldecode($request);
$request = json_decode($request,true);
return json($request);