常见跨域问题的解决

前言

无论是作为前端开发同学还是作为后端开发的同学，在日常的开发中都有可能会遇到跨域的问题，数据无法请求，数据提交不成功的情况；下面是我对常见的跨域问题的一些简单的解决方法，如果有不足的地方，还请谅解。

同源策略

协议相同
域名相同
端口相同

只有上面的三个都相同，才能称为是同源，否则就要解决跨域问题。

触发预请求的条件

在下面的条件下，浏览器会向服务器发送两个请求。

使用了某些方法，比如说PUT、DELETE等。
Fetch 规范规定了对 CORS安全的首部字段集合，人为设置会触发预请求。
Content-Type的值不是text/plain ，multipart/form-data，application/x-www-form-urlencoded

ajax 默认使用最后一个content-type类型的值。

解决方法

CORS解决跨域

如果不存在预请求那就直接加入头部信息,可以在服务器端代码中加入，也可以直接在服务端配置文章中加入，例如Nginx的server中。

1	Access-Control-Allow-Origin:*

如果会有预请求的情况，在代码中加入

1
2
3

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:*
Access-Control-Allow-Headers:*

jsonp解决跨域

原理：

利用script标签，规避跨域问题，<script src="url"></script>;
在客户端声明一个函数，function jsonCallback(){};
在服务端根据客户端传来的信息，查找数据库，然后返回一份字符串。
客户端，利用<script>标签解析为可运行的JavaScript代码，调用 jsonCallback() 函数。

局限性： 只能使用处理GET请求

例子：

客户端

<script type="text/javascript">
	function jsonCallback(data){
		console.log(data);
	}
</script>

<script src="http://localhost/learningcode/CORS/apiII.php"></script>

服务器端：

注：我这里使用PHP代码实现

$data = array('msg'=>'success','code'=>200,'data'=>array());

$data = json_encode($data);
echo 'jsonCallback('.$data.')';

使用代理服务器

因为跨域问题是违反了浏览器的同源规则，所以我们如果不使用浏览器就不会存在跨域的问题，所以我们使用一个代理服务器，我们去请求代理服务器，代理服务器帮我们请求指定的资源，此时不存在跨域问题，请求到资源之后，再返回给客户端。

参考链接