栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

跨域问题产生的原因以及解决方法

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

跨域问题产生的原因以及解决方法

跨域问题的产生原因

浏览器限制
产生跨域请求
请求是xhr

跨域问题的解决方式

1、使用jsonp
2、修改服务器对cookie的限制
3、Nginx配置允许请求跨域

使用jsonp的弊端:
1、使用jsonp解决跨域问题需要后端修改代码支持jsonp

2、请求只能是get,即使改成post还是get

3、发送的不是XHR请求
具体解决方式 1、服务器允许带cookie的请求,代码修改:
header("Access-Control-Allow-Credentials:true");

header("Access-Control-Allow-Origin:".(isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:'*'));

header("Access-Control-Allow-Headers:Origin,X-Requested-With,X_Requested_With,X_Token,Content-Type,Accept");

第一行:允许跨域
第二行:允许哪些请求来源进行跨域
第三行:允许哪些请求头可进行跨域
带cookie的跨域请求Origin需要是完全匹配,不能再使用“*”;要新加“Credentials”属性,并且值为“true”;跨域请求的Header头带“Origin”字段,判断是否有此字段

2、使用jsonp,后端修改代码允许跨域
public function outputJsonp($content, $code = 0, $msg = '')
{
	//省略一部分不重要代码
	$data = [
		'result' => $code,
		'data' => $content,
		'msg' =>$msg
	];
	//jsonp返回
	//这里的callback是前端自定义传过来的,前端工程师如果用过跨域的话,那她肯定知道这个是"$callback"怎么回事
	$callback = $this->getRequest()->getQuery("callback");
	if($callback){
		exit($callback."(".json_encode($data).")");
	}
	exit(json_encode($data));
}
3、Nginx配置允许跨域:
service{

	#省略网站访问正常配置代码
	#······
	location /{
		add_header Access-Control-Allow-Methods *;
		add_header Access-Control-Allow-Max-Age 3600;#请求缓存最大时间
		add-header Access-Control-Allow-Credentials true;#允许跨域请求
		add_header Access-Control-Allow-Origin $http_origin;#获取http请求的Origin字段
		add_header Access-Control-Allow-Headers $http_access_control_request_headers;#获取请求头信息字段

		if($request_method = OPTIONS){
			return 200;
		}
	}
	
}
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/244723.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号