thinkphp5 关于跨域的一些坑
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‘;
一般情况下这样也就行了,但是有的时候还会存在跨域,原因就是前端请求的时候有一个地方需要注意
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中所有自定义的参数,都要写在第一步中的第三行里面,要不然就等着跨域吧~
一开始我的开发环境是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不用配置这第三步
thinkphp5 关于跨域的一些坑的更多相关文章
- 关于跨域踩的坑,浏览器 status code为200,但实际上是跨域了
背景 后端使用Nginx并更改本地host文件,起本地服务.将aaa.bbbb.com代理至本地IP地址(10.26.36.156).使用$.ajax调用后端restful接口,要求content-t ...
- No 'Access-Control-Allow-Origin' header: 跨域问题踩坑记录
前言 前两周在服务器上部署一个系统时,遇到了跨域问题,这也不是第一次遇到跨域问题了,本来以为解决起来会很顺利,没想到解决过程中遇到了很多坑,所以觉得有必要写一篇博客记录一下这个坑. 问题产生原因 本来 ...
- Springboot跨域配置的坑
部分时间需要加上crossOrigin
- session跨域共享解决方案
要让session跨域共享,需要解决三个问题: 1.通过什么方法来传递session_id? 2.通过什么方法来保存session信息? 3.通过什么方法来进行跨域? 一.传递session_id有4 ...
- cookie跨域那些事儿
一个请求从发出到返回,需要浏览器和服务端的协调配合.浏览器要把自己的请求参数带给服务端,服务端校验参数之后,除了返回数据,也可能会顺便把请求是否缓存,cookie等信息告诉浏览器.当请求是跨域请求的时 ...
- 从Ueditor跨域上传,总结的一次跨域上传的爬坑经历
项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- 从壹开始前后端分离 [.netCore 填坑 ] 三十三║ ⅖ 种方法实现完美跨域
缘起 哈喽大家周四好,趁着大家在团建的时候花一个下午学点儿东西,也是督促大家学习哟,希望大家看到老张的文章,可以有一丢丢的学习动力.不过话说过来,该吃的团建还是要去的,不能学我呀 [ /(ㄒoㄒ)/~ ...
- vue踩坑(二):跨域以及携带cookie
最近后台需求要在请求的时候传cooki给后台,正常情况下拿到cookie后存在cookie里,同域名下是会自己带到请求头里的,但是因为要在本地调试,那么问题就来了,localhost:8080下面的c ...
- 关于WebAPI跨域踩到的一点坑
最近在尝试前后端分离的WebAPI+AngularJS方案,在率先处理授权的时候,踩到了一点WebAPI跨域的坑,其实严格意义上来说也不算是坑吧,只是我自己对WebAPI不熟悉而已,这里我与大家分享一 ...
随机推荐
- java学习之旅(day.06)
switch多选择结构 多选择结构还有一个实现方式就是switch case switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支 switch(expression ...
- js毫秒转时分秒
const formatSeconds = (value) => { if (value === 0 || value < 1000) return '0秒'; var timestamp ...
- redis三主三从集群快速搭建
redis集群快速搭建 1 本文以redis6.2.6版本为例,快速搭建一套三主三从的redis集群,已经提前将脚本写好,只需要在节点上面进行执行即可安装 #!/bin/bash install_re ...
- salesforce零基础学习(一百三十八)零碎知识点小总结(十)
本篇参考: https://help.salesforce.com/s/articleView?id=release-notes.rn_apex_5level_SOQLqueries.htm& ...
- MPI学习笔记(四):矩阵相乘的Cannon卡农算法
mpi矩阵乘法:C=αAB+βC 一.Cannon卡农算法基本介绍 1.二维矩阵串行乘法 两个n维方阵的乘法A×B=C的串行计算公式为: 下图是用图示来表示的这种计算规则: 2.二维块划分的思想 并行 ...
- Vue cli之传递数据
1.父组件的数据传递给子组件 // 父组件 <Menu title="来自Home的数据" :clickNum="num"></Menu> ...
- 用python字典统计CSV数据
1.用python字典统计CSV数据的步骤和代码示例 为了使用Python字典来统计CSV数据,我们可以使用内置的csv模块来读取CSV文件,并使用字典来存储统计信息.以下是一个详细的步骤和完整的代码 ...
- swap文件修复
修复swap文件 vim -r /aaaa.swap
- Java中的空指针异常 java.lang.NullPointerException
空指针异常 属于运行错误,java.lang.NullPointerException 原因:当引用名称的值为null时,就不能方法某个对象中的属性或方法,如果非要访问则就出现空指针异常 解决办法:在 ...
- echarts的示例跟做出来的不一样
先给大家看下我做出来的和echarts官网做出来的 代码什么的都是一模一样但是颜色不一样 它字的颜色和柱状图颜色还一样不知道是不是脑子有猫病~ 上面是我做的 下面是官网的 主要是代码都是一样 我又不 ...