关于前后端分离跨域问题

一、问题

研究vue+c# 前后端分离的项目中，会涉及跨域的一些问题：

比如

报错1.Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

报错2.Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

二、处理方法 

出于安全考虑，后端在接受跨域请求时会做限制，若要成功访问，那便要告诉后端什么请求允许，什么请求不允许

此时需在web.config->system.webServer下加以下配置

几点说明：

1.

允许跨域post访问、get访问等好理解，另外前端直接跨域访问后端，则options一定得加上，这会导致错误2

前端直接跨域访问后端，复杂请求时(如传递参数中带json数据)，会调两次请求：
一次options请求，预请求，用于服务端验证，请求是否被允许。
第二次真正请求(方式比如post或者get)。

后端跨域的限制，对第一次options请求本身也有限制，若不允许options请求，则会报错误2。

（补充一个vue-element-admin学习时的坑）

在vue-element-admin与后端做跨域调方法的时候，vue-element-admin例子里调登录外，其他函数调用时，在请求头上加了一个X-Token

跨域的配置里headers过滤一般不会配这个，然后导致无法调到后台

 

 要么token转至不要放headrs，要么跨域配置要加上X-Token

三、小结

以上是处理跨域时一些总结，记下备查。

另关于前后端和跨域，上述Options预请求只存在于前端直接跨域访问后端 ，若是后端直接跨域调取方法(或用postman调取)则不会有这个问题。

作为服务需求端，前端直接调用第三方服务自然不太合理，而更多会是从自己的后端去掉第三方服务，处理后再给前端使用。

作为服务提供端，若非同一项目，只想白名单内的请求调用，做请求限制自然是必要的。

跨域限制存在便是有其作用。