thinkphp5 + vue 解决跨域的办法

项目背景：前端是vue-manage-system，后端是tp5.1

1、首先在tp5的入口文件：public/index.php 在里面添加三行：

// [ 应用入口文件 ]
 
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE");
header("Access-Control-Allow-Headers:x-requested-with, Referer,content-type,token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");
// 不用多说，就是上面三行，注意第三行，里面有一个参数：token，这个是为后面自定义header头准备的<br>
// 定义应用目录
define('APP_PATH', __DIR__ . '/../application/');
// 加载框架引导文件
require __DIR__ . '/../thinkphp/start.php';

这样就可以了，在tp5的方面就弄完了，一般情况下这样也就行了，但是有的时候还会存在跨域，原因就是前端请求的时候有一个地方需要注意

这样设置不太美观，还有一种方式是利用tp5的行为方式来解决跨域请求，如何设置

2、不管是vue.axios还是jq的ajax，请求类型不能是application/json

return new Promise((resolve, reject) => {
       this.$axios.post(url, params, {
           headers: {'content-type': 'application/x-www-form-urlencoded'},	//需要修改注意的地方       
           responseType: responseType,
           timeout: 120 * 1000
       }).then(response => {
           resolve(response.data)
       }).catch(err => {
           this.$message.error(err.response.data.message);
           reject(err)
       })
   })

header中所有自定义的参数，都要写在第一步中的第三行里面

3、nginx配置跨域的自定义header参数

该步骤前提是你需要在前端发送ajax请求时headers里需要附带（token等）其他自定义参数，才需要设置本步骤

在站点配置文件（vhost.ini）中 location / {} 里面添加下面几行：
location / {
　　　　if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin '*';
            add_header Access-Control-Allow-Headers 'token';
            add_header Content-Length 0;
            return 204;
       }
       if (!-e $request_filename) {
            rewrite  ^(.*)$  /index.php?s=/$1  last;
            break;
       }
}

此才是真正的解决了跨域的问题，可能是apache默认配置了的原因，apache不用配置这第三步

4、就是tp程序不要报错

这第4步算是一个小提醒吧，就是tp程序不要报错。。。因为当tp5抛出异常的时候，会影响你public/index.php中的配置，导致产生跨域~

该文章转自：https://www.cnblogs.com/lamplnmp/p/13141689.html