前端开发中解决No Access-Control-Allow-Origin header localhost:63342 is not allowed access跨域问题

在前端开发时会遇到前端和后台服务器在不同IP上的情况，这是如果直接ajax 远程后台服务器，会报错

Failed to loadhttp://10.100.122.138:8081/qrapp-service/bus/getStationByLine?busLine=1

: No 'Access-Control-Allow-Origin'header is present on the requested resource. Origin 'http://localhost:63342' istherefore not allowed access.

如果将html与后端服务器放在一起，那么不存在跨域问题，因为前端的ip:端口与后端的ip:端口一致

如果不好放在一起，或前后端分离，前后端ip及端口不一致，那么怎么办呢？

为什么需要同源策略呢？

看以下的场景：

浏览器请求站点A，GET index.html

其响应可能导致浏览器不仅仅访问站点A，还会导致访问站点B（比如引用了站点B的图片、音视频等）

所以这里访问站点B的请求是由于用户访问站点A后自动发出的，未必是用户自愿发出的请求

当然也有可能是用户在地址栏中直接访问站点B

 

如果没有同源策略，会发生什么问题呢？

情况1：

浏览器保存了站点A的cookie

假设浏览器中来自站点B的javascript脚本向站点A发起了一个http请求，这个时候浏览器就会自动把我们站点A的cookie放到这个请求中，此时站点A会执行身份验证，就会按照之前登录过的用户的权限去执行请求，但实际上这个请求来自于站点B

 

另一种情况：

比如用户在浏览器中同时打开了两个标签页，标签页1访问的是站点A，比如向一个目标12345进行转账；标签页2的站点B提供了一个javascript脚本，这个脚本就会试图去发现标签页1的dom结构，其可以把这个dom结果的value进行修改，比如把12345改为攻击者的账号

 

所以，关于同源策略，实际上是安全性与可用性需要一个平衡点

可用性：HTML 的创作者决定跨域请求是否对本站点安全

第一点允许：<script><img><iframe><link><video><audio>带有 src 属性可以跨域访问，虽然其html组装的内容是来自不同的源的，但是浏览器是允许的

第二点允许：允许跨域写操作：例如表单提交或者重定向请求。这种跨域写操作会带来CSRF的安全性问题。

安全性：浏览器需要防止站点B的脚本向站点A发起危险动作

禁止1：如站点B的javascript脚本去读取站点A的cookie信息，或者localStorage，或者indexDB，都是禁止的

禁止2：DOM 无法获得（防止跨域脚本篡改 DOM 结构）

禁止3：站点B的脚本不能向站点A发送ajax请求（前端开发者最经常遇到的问题

方法1：使用nginx

方法就是将前端部署到nginx上，在ajax的时候，访问nginx，而nginx配置proxy_pass到后端的ip:端口

这样就可以看做前端实际上和后端是部署在一起的，满足浏览器同源策略：协议、主机、端口必须完全相同

所以不存在跨域的问题

具体方法：如何在开发react前后端分离项目中，使用nginx实现跨域

方法2：使用浏览器的CORS机制

CORS：Cross-Origin Resource Sharing 允许在浏览器中跨域访问

RFC架构中推荐的方式，这个方案是可以保证安全性的

如果站点 A 允许站点 B 的脚本访问其资源，必须在 HTTP 响应中显式的告知浏览器：站点 B 是被允许的，而其他的站点是不可以的

要求两点

1. 访问A的这个请求是站点B发起的，那么浏览器要通过origin这个头部告诉站点A，这个请求是站点B发起的

2. 在站点A的这个响应中，必须告诉浏览器，通过Access-Control-Allow-Origin头部，后续的哪些跨域请求是允许的，实际上同源及跨域，全部是浏览器来执行的，server是不做任何限制的。server都是会响应的，只是如果不满足同源策略，浏览器不会渲染。

如果可以在代码中硬编码，那么这种方式也是可以的