如何解决前端跨域问题？

可以使用服务器代理或者在后端设置允许跨域。

现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。

如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。

什么是跨域？

浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收 服务器响应回来的数据，报错信息如下：

最常用的四种跨域解决方案

1.cors

cors跨域资源共享允许是在服务端"Access-Control-Allow-Origin"字段设置的，当将cors设置为允许某个地址访问时，该地址就可以跨域访问这个服务器地址。当cors设置为"*"时即允许所有地址访问时，则表示所有地址都可以跨域访问这个服务器地址的资源。

2、 通过jsonp跨域

Jsonp是Json的一种“使用模式”，他就可以解决浏览器遇到的跨域问题，我们可以动态创建script，再请求一个带参网址实现跨域通信。用Jsonp请求得到的是JavaScript，相当于直接用JavaScript解析。

3、postMessage跨域

在h5中新增了postMessage方法，postMessage可以实现跨文档消息传输，我们可以通过Windows的message事件来监听发送跨文档消息传输内容。

4、proxy（代理）

原理：因为同源策略只是针对浏览器的安全策略，但是服务端并不受同源策略的限制，也就不存在跨域的问题。

19.7.24

前端通过http请求跨域的同时需要带上cookie信息，前端需要设置withCredentials = true。

而后端也需要有所修改。

Access-Control-Allow-Origin 字段必须指定域名，不能为*

Access-Control-Allow-Credentials为true

后端可以通过HtttpServletRequest的Header中找到Origin。是跨域地址的host加port。

后端需要维护一个跨域URL的白名单，用Origin contains 匹配白名单的URL，成功则配置response 的 Access-Control-Allow-Origin，指定Origin。

就实现跨域传cookie了。

参考：

https://blog.csdn.net/weixin_34162629/article/details/88809419

https://www.cnblogs.com/nuccch/p/7875189.html

https://blog.csdn.net/xshsjl/article/details/82994219

https://blog.csdn.net/buildcourage/article/details/84890911

https://www.jianshu.com/p/89a377c52b48

---