thinkphp5 关于跨域的一些坑,附上解决办法(比较全面了)
项目背景:前端是uniapp开发的h5,后端是tp5,其他语言我觉得应该大同小异,主要是思路,本文就以这俩为例吧
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的方面就弄完了,没错,就是这么简单而且一般百度能搜索到的,就是这些
一般情况下这样也就行了,但是有的时候还会存在跨域,原因就是前端请求的时候有一个地方需要注意
2、前端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的时候就没有跨域问题,此时问题原因显而易见!
3、经过搜索、测试,现得出在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步???
这第4步算是一个小提醒吧,就是tp程序不要报错。。。因为当tp5抛出异常的时候,会影响你public/index.php中的配置,导致产生跨域~
tip:不知道这篇文章还能不能回到首页,哈哈~~
thinkphp5 关于跨域的一些坑,附上解决办法(比较全面了)的更多相关文章
- IE8浏览器跨域接口访问异常的解决办法
IE8版本以下浏览器绝对是一个神奇的存在,忙碌好久,万事具备,居然在ajax调用接口的时候直接爆炸 陈述一下问题 首先是有这样一个接口,请求类型POST,入参JSON,出参JSON,jQuery aj ...
- [PHP] 再续 Laravel 5.5 接口 跨域问题 【终极暴力解决办法】
上文中提到 Laravel5.5 使用 laravel-cors 实现 Laravel 的跨域配置 用插件来跨域 此方法能解决一部分api 请求问题 但我碰到的是 接口 请求size 超过10k,导致 ...
- jsonp跨域请求360数据乱码解决办法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法
原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebServi ...
- Springboot中关于跨域问题的一种解决方法
前后端分离开发中,跨域问题是很常见的一种问题.本文主要是解决 springboot 项目跨域访问的一种方法,其他 javaweb 项目也可参考. 1.首先要了解什么是跨域 由于前后端分离开发中前端页面 ...
- 2019-03-26 SpringBoot项目部署遇到跨域问题,记录一下解决历程
近期SpringBoot项目部署遇到跨域问题,记录一下解决历程. 要严格限制,允许哪些域名访问,在application.properties文件里添加配置,配置名可以自己起: cors.allowe ...
- [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011
Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...
- 关于跨域踩的坑,浏览器 status code为200,但实际上是跨域了
背景 后端使用Nginx并更改本地host文件,起本地服务.将aaa.bbbb.com代理至本地IP地址(10.26.36.156).使用$.ajax调用后端restful接口,要求content-t ...
- No 'Access-Control-Allow-Origin' header: 跨域问题踩坑记录
前言 前两周在服务器上部署一个系统时,遇到了跨域问题,这也不是第一次遇到跨域问题了,本来以为解决起来会很顺利,没想到解决过程中遇到了很多坑,所以觉得有必要写一篇博客记录一下这个坑. 问题产生原因 本来 ...
- 解决No 'Access-Control-Allow-Origin' header is present on the requested resource.跨域问题(后台(java)解决方法)
附:前端常见跨域解决方案(全) 跨域错误 解决方法 在后台写一个过滤器来改写请求头 附上一个前端不知所以然的后台java代码: public class CorsFilter implements F ...
随机推荐
- Hexo+Gitee搭建个人博客
Hexo+Gitee搭建个人博客 (一)前言 beacuse(事出有因): 很久之前就知道Hexo搭建个人博客,但由于惰性,一直没有行动,在此之前一直用的是博客园. but(但是): 今天打开博客园, ...
- #Kruskal,分治#AT4569 Connecting Cities
题目传送门 考虑如何去掉这个绝对值, 换句话说,如何减少边数并且能建出 MST. 在求解偏序问题时,往往会分而治之, 这样原来 \(O(n^2)\) 的做法就能够被优化. 考虑将所有点对半折开, 左半 ...
- #扫描线,并查集,切比雪夫距离#洛谷 5193 [TJOI2012]炸弹
题目 在平面上有 \(n\) 个炸弹 \([1 \ldots n]\) , 每个炸弹的爆炸范围是 \(|x-x_i|+|y-yi| \leq R\) 如果某个炸弹爆炸了,那么它将引燃它范围内的所有炸弹 ...
- OpenHarmony嵌套类对象属性变化:@Observed装饰器和@ObjectLink装饰器
上文所述的装饰器仅能观察到第一层的变化,但是在实际应用开发中,应用会根据开发需要,封装自己的数据模型.对于多层嵌套的情况,比如二维数组,或者数组项class,或者class的属性是class,他们的第 ...
- 掌握 C# 变量:在代码中声明、初始化和使用不同类型的综合指南
C# 变量 变量是用于存储数据值的容器. 在 C# 中,有不同类型的变量(用不同的关键字定义),例如: int - 存储整数(没有小数点的整数),如 123 或 -123 double - 存储浮点数 ...
- HarmonyOS SDK开放能力,服务鸿蒙生态建设,打造优质应用体验
华为开发者大会2023(HDC.Together)于8月4日至6日在东莞松山湖举行,在HarmonyOS端云开放能力技术分论坛上,华为为广大开发者们介绍了HarmonyOS SDK开放能力在基础开发架 ...
- MogDB/openGauss访问控制简介
MogDB/openGauss 访问控制简介 SQL 可以针对不同的数据库对象赋予不同的权限,这样就可以限制用户对数据的不必要访问,提高数据访问的安全性.常见的 SQL 权限如下: SELECT/UP ...
- Avalonia 中的样式和控件主题
在 Avalonia 中,样式是定义控件外观的一种方式,而控件主题则是一组样式和资源,用于定义应用程序的整体外观和感觉.本文将深入探讨这些概念,并提供示例代码以帮助您更好地理解它们. 样式是什么? 样 ...
- Excel 表间关联运算的示例
用 Excel 处理数据时,经常会涉及到多页 sheet 数据之间的关联运算需求,用 vlookup 可以完成部分简单关联,但较复杂的情况时仍然不太方便,常常需要多次操作才能完成.另外,当要做关联的文 ...
- docker 应用篇————具名挂载和匿名挂载[十三]
前言 简单整理一下具名挂载和匿名挂载. 正文 来看一下匿名挂载. 这里-v指定了容器内部的路径,但是没有指定容器外部的路径,那么挂载到了什么地方. 用inspect 查看一下. 挂载到这个位置了. 然 ...