跨域问题产生的原因以及解决方法-原创手记-慕课网

跨域问题的产生原因

浏览器限制
产生跨域请求
请求是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;
		}
	}
	
}