前几天写过一次&＃xff0c;然后被管理员移出首页了&＃xff0c;原因是写的不好。。。。哈哈确实也不好&＃xff0c;而且我按我自己的博客来重新操作&＃xff0c;发现。。。还有有跨域问题&＃xff01;&＃xff0c;惭愧惭愧&＃xff0c;而且当我重新在百度搜索的时候发现&＃xff0c;&＃xff0c;&＃xff0c;我这文章竟然显示在第一条。。。
为了不误人子弟&＃xff0c;经过各种查找各种搜索&＃xff0c;现重新整理出跨域解决方案&＃xff0c;我觉得应该是市面上比较详细的了吧&＃xff0c;开始&＃xff1a;
项目背景&＃xff1a;前端是uniapp开发的h5&＃xff0c;后端是tp5&＃xff0c;其他语言我觉得应该大同小异&＃xff0c;主要是思路&＃xff0c;本文就以这俩为例吧
1、首先在tp5的入口文件&＃xff1a;public/index.php 在里面添加三行&＃xff1a;
// [ 应用入口文件 ]
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");
// 不用多说&＃xff0c;就是上面三行&＃xff0c;注意第三行&＃xff0c;里面有一个参数&＃xff1a;token&＃xff0c;这个是为后面自定义header头准备的
// 定义应用目录
define(&＃39;APP_PATH&＃39;, __DIR__ . &＃39;/../application/&＃39;);
// 加载框架引导文件
require __DIR__ . &＃39;/../thinkphp/start.php&＃39;;
这样就可以了&＃xff0c;在tp5的方面就弄完了&＃xff0c;没错&＃xff0c;就是这么简单~而且一般百度能搜索到的&＃xff0c;就是这些~
一般情况下这样也就行了&＃xff0c;但是有的时候还会存在跨域&＃xff0c;原因就是前端请求的时候有一个地方需要注意
2、前端uniapp的网络请求用的是uni.request&＃xff0c;不管是uni.request还是jq的ajax&＃xff0c;都一样&＃xff0c;都需要注意一点&＃xff0c;就是请求类型不能是application/json&＃xff01;&＃xff01;
uni.request({
url: &＃39;http://test-tp5.io&＃39;,
data: {a:1,b:2},
header: {
&＃39;content-type&＃39;: &＃39;application/x-www-form-urlencoded&＃39;, // 用这个&＃xff01;
// &＃39;content-type&＃39;: &＃39;application/json&＃39;, 这里是反面举例&＃xff0c;一定不要用这个&＃xff01;不信你试试&＃xff01;
&＃39;token&＃39;: &＃39;this is token&＃39; // 看到这个token了没有&＃xff0c;它在在第一步的第三行出现过~
},
method: &＃39;POST&＃39;,
success: (res)&＃61;> {
console.log(&＃39;成功了&＃xff1a;&＃39;,res);
},
fail: (res)&＃61;>{
console.log(&＃39;出错了&＃xff1a;&＃39;,res);
}
});
header中所有自定义的参数&＃xff0c;都要写在第一步中的第三行里面&＃xff0c;要不然就等着跨域吧~
OK&＃xff0c;到这绝大部分到这也就没有问题了~但是&＃xff01;鄙人就是这么的与众不同&＃xff01;没错&＃xff0c;当我弄到这的时候&＃xff01;我又跨域了&＃xff01;想哭了~
一开始我的开发环境是phpstudy&＃xff0c;在到这一步的时候&＃xff0c;跨域问题已经消失的无影无踪了&＃xff0c;然后前几天我换成了docker&＃xff0c;然后久违的跨越又来了。。。
而且跨域的原因是自定义header参数&＃xff0c;即如果我把request里面的token参数去掉&＃xff0c;请求是正常的&＃xff0c;加上就不行了&＃xff01;
此时经过对比我发现&＃xff0c;phpstudy我用的是apache&＃xff0c;docker我用的是nginx&＃xff0c;而且当我把项目迁到phpstudy的时候就没有跨域问题&＃xff0c;此时问题原因显而易见&＃xff01;
3、经过搜索、测试&＃xff0c;现得出在nginx下如何配置跨域的自定义header参数
在站点配置文件中 location / {} 里面添加下面几行&＃xff1a;
location / {
if ($request_method &＃61; &＃39;OPTIONS&＃39;) {
# 【必须】建议在发布环境用域名而不是“星”号
add_header Access-Control-Allow-Origin &＃39;*&＃39;;
# Allow-Headers 指定允许的自定义请求头&＃xff0c;如用户 Token&＃xff0c;而且这些不用写那么多&＃xff0c;只写自定义的参数就可以
add_header Access-Control-Allow-Headers &＃39;token&＃39;;
# 一般来说在 POST 请求时因为 Content-Type 的原因在本次 OPTIONS 预请求后&＃xff0c;
# 会再发送的 POST 请求&＃xff0c;而 POST 请求是可以正常接收的
# add_header Access-Control-Allow-Methods &＃39;GET, POST, PUT, DELETE, PATCH, OPTIONS&＃39;;
# 请求是否携带 COOKIE&＃xff0c;无需要可忽略。有说该设置为 true 时 Allow-Origin 不可为 &＃39;*&＃39;
# add_header Access-Control-Allow-Credentials true;
# 这个响应 Content-Type 也是根据需要设置(一般情况可以不用设置)
# add_header Content-Type &＃39;application/json; charset&＃61;utf-8&＃39;;
# 如下 Content-Length 可忽略&＃xff0c;返回状态码根据个人习惯可设置为 200
add_header Content-Length 0;
return 204;
}
# 没错&＃xff0c;为了方便你们对比&＃xff0c;上面这些才是要添加的
# 而且你们可能发现了&＃xff0c;我上面有好多注释掉的&＃xff0c;因为这些是我在搜索出来的&＃xff0c;而且经过我一步步的注释&＃xff0c;发现只要一开始的两行和最下面的两行就可以了
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php?s&＃61;/$1 last;
break;
}
}
至此才是真正的解决了跨域的问题&＃xff0c;可能是apache默认配置了的原因&＃xff0c;apache不用配置这第三步
4、为啥还有第4步&＃xff1f;&＃xff1f;&＃xff1f;
这第4步算是一个小提醒吧&＃xff0c;就是tp程序不要报错。。。因为当tp5抛出异常的时候&＃xff0c;会影响你public/index.php中的配置&＃xff0c;导致产生跨域~
tip:不知道这篇文章还能不能回到首页&＃xff0c;哈哈~~
京公网安备 11010802041100号