浏览器跨域问题以及vue前后端分离跨域解决方案简介

简介：所谓跨域问题，是浏览器为了安全起见，同源的文件中的ajax请求只能访问同源的服务器的资源。例如访问www.google.com得到的资源中如果有ajax函数，则该函数访问的api只能是www.google.com提供的服务。同源指的是：协议/域名/端口一致。

解决跨域的方法：

1. CORS(Cross-Origin Resource Sharing，跨源资源共享)

基本思想：就是如果发送了跨域请求，那么浏览器就会在该请求中说明这是个跨域请求，服务器判断对该跨域请求是否提供服务

实现方式：浏览器在跨域请求中增加Origin头，头中是源信息：协议/域名/端口，如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin 头部中回发相同的原信息（如果是公共资源，可以回发“*”），如果没有这个头部，或者有着头部但原信息不匹配，浏览器就会驳回请求。注意：默认情况下，请求和响应都不包含 cookie 信息。

2. JSONP

基本思想：跨域的“资源嵌入”是被允许的，也就是说可以通过<script>标签来嵌入一段来自其他服务器的脚本。获得这个脚本就相当于跨域了，该脚本运行在当前域，所以是安全的，无法访问其他源。

缺点：只支持GET操作

3.  反向代理

基本思想：前后端都在一个反向代理服务器下，这样对浏览器来说前后端就在一个域下了。

 

vue+javaweb的跨域问题解决方案：

1.可以使用CORS(Cross-Origin Resource Sharing，跨源资源共享)

2.使用vue-cli项目中的代理

两个实现可以参考https://segmentfault.com/a/1190000009208644