thinkphp5 關於跨域的一些坑，附上解決辦法（比較全面了）

前幾天寫過一次，而後被管理員移出首頁了，緣由是寫的很差。。。。哈哈確實也很差，並且我按我本身的博客來從新操做，發現。。。還有有跨域問題！，慚愧慚愧，並且當我從新在百度搜索的時候發現，，，我這文章居然顯示在第一條。。。

爲了避免誤人子弟，通過各類查找各類搜索，現從新整理出跨域解決方案，我以爲應該是市面上比較詳細的了吧，開始：

項目背景：前端是uniapp開發的h5，後端是tp5，其餘語言我以爲應該大同小異，主要是思路，本文就以這倆爲例吧

 

一、首先在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頭準備的

// 定義應用目錄
define('APP_PATH', __DIR__ . '/../application/');
// 加載框架引導文件
require __DIR__ . '/../thinkphp/start.php';

這樣就能夠了，在tp5的方面就弄完了，沒錯，就是這麼簡單~並且通常百度能搜索到的，就是這些~

通常狀況下這樣也就好了，可是有的時候還會存在跨域，緣由就是前端請求的時候有一個地方須要注意

 

二、前端uniapp的網絡請求用的是uni.request，不論是uni.request仍是jq的ajax，都同樣，都須要注意一點，就是請求類型不能是application/json！！

uni.request({
　　url: 'http://test-tp5.io',
　　data: {a:1,b:2},
　　header: {
	'content-type': 'application/x-www-form-urlencoded', // 用這個！
	// 'content-type': 'application/json', 這裏是反面舉例，必定不要用這個！不信你試試！
	'token': 'this is token'  // 看到這個token了沒有，它在在第一步的第三行出現過~
　　},
　　method: 'POST',
　　success: (res)=> {
　　　　console.log('成功了：',res);
　　},
　　fail: (res)=>{
　　　　console.log('出錯了：',res);
　　}
});

header中全部自定義的參數，都要寫在第一步中的第三行裏面，要否則就等着跨域吧~

OK，到這絕大部分到這也就沒有問題了~可是！鄙人就是這麼的不同凡響！沒錯，當我弄到這的時候！我又跨域了！想哭了~

一開始個人開發環境是phpstudy，在到這一步的時候，跨域問題已經消失的無影無蹤了，而後前幾天我換成了docker，而後久違的跨越又來了。。。

並且跨域的緣由是自定義header參數，即若是我把request裏面的token參數去掉，請求是正常的，加上就不行了！

此時通過對比我發現，phpstudy我用的是apache，docker我用的是nginx，並且當我把項目遷到phpstudy的時候就沒有跨域問題，此時問題緣由顯而易見！

 

三、通過搜索、測試，現得出在nginx下如何配置跨域的自定義header參數

在站點配置文件中 location / {} 裏面添加下面幾行：

location / {
　　　　if ($request_method = 'OPTIONS') {
            # 【必須】建議在發佈環境用域名而不是「星」號
            add_header Access-Control-Allow-Origin '*';
            # Allow-Headers 指定容許的自定義請求頭，如用戶 Token，並且這些不用寫那麼多，只寫自定義的參數就能夠
            add_header Access-Control-Allow-Headers 'token';
            # 通常來講在 POST 請求時由於 Content-Type 的緣由在本次 OPTIONS 預請求後，
            # 會再發送的 POST 請求，而 POST 請求是能夠正常接收的
            # add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
            # 請求是否攜帶 Cookie，無須要可忽略。有說該設置爲 true 時 Allow-Origin 不可爲 '*'
            # add_header Access-Control-Allow-Credentials true;
            # 這個響應 Content-Type 也是根據須要設置（通常狀況能夠不用設置）
            # add_header Content-Type 'application/json; charset=utf-8';
            # 以下 Content-Length 可忽略，返回狀態碼根據我的習慣可設置爲 200
            add_header Content-Length 0;
            return 204;
        }
　　　　　# 沒錯，爲了方便大家對比，上面這些纔是要添加的
　　　　　# 並且大家可能發現了，我上面有好多註釋掉的，由於這些是我在搜索出來的，並且通過我一步步的註釋，發現只要一開始的兩行和最下面的兩行就能夠了

        if (!-e $request_filename) {
            rewrite  ^(.*)$  /index.php?s=/$1  last;
            break;
        }
}

至此纔是真正的解決了跨域的問題，多是apache默認配置了的緣由，apache不用配置這第三步

 

四、爲啥還有第4步？？？

這第4步算是一個小提醒吧，就是tp程序不要報錯。。。由於當tp5拋出異常的時候，會影響你public/index.php中的配置，致使產生跨域~

 

tip:不知道這篇文章還能不能回到首頁，哈哈~~