前后端分离产生的跨域问题

1、什么是跨域，什么情况下会产生跨域问题？

原因：跨域问题，顾名思义就是跨域名访问所产生的问题，跨域主要是由于浏览器的同源策略
前端与后端非同源就会产生跨域问题（浏览器默会拦截掉非同源请求）。
什么是非同源？
前端的地址与前端即将请求的后端接口地址有以下的区别就视为非同源：

1. 协议不同
2. 域名不同
3. 端口不同

例如我前端的地址是：http://item.explode.com/index.html
1）、协议不同的例子：
在index.html中通过ajax去请求 https://item.explode.com/index.php （一个是http，一个是https）;
2）、域名不同的例子：
在index.html中通过ajax去请求 http://items.explode.com/index.php （一个是 item.explode.com，一个是 items.explode.com）;
3）、端口不同的例子：
在index.html中通过ajax去请求 http://item.explode.com:8080/index.php （一个是默认的80端口，一个是8080端口）;

以上三个例子就是前端与后端接口非同源，浏览器出于同源策略，认为后端接口与前端不属于同一个源，可能会导致安全问题，所以就会拦截掉ajax的请求。

2、如何解决跨域问题？

其实跨域主要有以下两种类型，所产生的问题也有对应两种：

1.简单的跨域
2.复杂的跨域

简单的跨域就是普通的跨域（协议不同、域名不同、端口不同）
问题：浏览器会拦截请求。
解决方案：在后端接口返回的头部信息中加入 Access-Control-Allow-Origin:*
（其中*的意思是则允许所有域名的脚本访问该资源，*也可以换成特定的域名，例如：http://item.explode.com）

复杂的跨域是在简单的跨域的基础上自定义了请求头或者修改了Content-Type的默认值
问题：浏览器会拦截请求，并且在每一次请求前会自动进行一次 options 请求
解决方案：在后端接口返回的头部信息中加入 “Access-Control-Allow-Headers”:“X-Requested-With,Accept,Accept-Version,Content-Length,Content-Type,***”
(其中***是你的自定义头部，例如 token，openid)
并且加入这个Access-Control-Max-Age:86400
告诉浏览器24小时内不要再来options我啦，我烦都烦死了

2020/06/30

记录一次在ios遇到跨域的问题，安卓和window的浏览器能正常访问，但ios的就是不行。
1、前端打印日志显示后端没有response结果返回；
2、后端程序逻辑端也没接到请求记录；
3、因为安卓和window可以正常访问，并且只有一个页面会请求失败，所以一开始没意识到是跨域问题。
猜测：初步认为是请求没发出去；
处理过程：
4、找了很久前端可能出现的问题（大概半天左右）没解决；
5、查了nginx日志，发现问题页面有ios的options请求记录，但接下去就没有get或者post的请求
猜测：意识到是跨域问题，因为在nginx配置那里进行了options的直接通过处理，初步猜测是ios在用Axios发起请求是在header头添加了什么东西导致；
继续处理：
6、debug发现不是header问题。
7、查询相关资料，发现options的正确响应状态码是204;
8、然而nginx配置里面返回了 200…
9、把200改为204，问题解决。
ps：之前我没注意到options的状态码是204才对，之所以配置了200，也是一个同事看一篇csdn上的声明原创的博文，是教怎么用nginx配置处理跨域问题的，那篇文章上就写着200，emmm…，那文章现在还5000多的阅读量，误人子弟呀 【旺柴】

最后附上一篇不错的处理跨域问题的博文链接：https://blog.csdn.net/Daijianshi_123/article/details/102853654