跨域问题的解决方案

为什么会产生跨域

前后端分离，前端的代码和服务端的代码分别部署在不同的域名下，导致的跨域问题

协议，域名端，口号不一样都是跨域

跨域资源共享CORS

定义在访问跨域资源的时候，浏览器与服务端如何沟通

使用自定义的HTTP头部让浏览器与服务器进行沟通，例如：

Origin: http://xx.com:80

如果浏览器可以处理请求，就在Access-Control-Allow-Origin头部中返回相同的源信息，例如

Access-Control-Allow-Origin: http://xx.com:80

其他的跨域方案

jsonp

动态创建script标签， src赋值为要请求的地址，仅支持get请求

1
2
3
4

<script>
  function func(data) {}
</script>
<script src='http://xx.com/list/callback=func'></script>

jsonp存在的问题：不安全、有缓存、传递的信息有限制、需要服务器处理

服务端允许跨域

设置一个允许跨域访问的源：Access-Control-Allow-Origin: http://xx.com:80

webpack proxy

1

"proxy": "代里地址"

nginx反向代理