Vue跨域请求以及请求数据方法和php接受数据的方法

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);