一、跨域的定义与常见跨域场景
同源策略是指"协议+域名+端口"三者相同;跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制,常见的跨域场景如下:
二、跨域问题解决方案
1、JSONP
- 原理:利用
<script>标签没有跨域限制,通过<script>标签src属性,发送带有callback参数的GET请求,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。 - 缺点:只能发送 get 一种请求,不支持 post 请求
- 应用场景: 实际工作不常用,有些第三方数据接口可能会使用jsonp解决跨域问题工作中不怎么用
2、中间服务器代理
前端部署地址:127.0.0.1:8000
中间服务器: 127.0.0.1:8000
目标服务器地址: 127.0.0.1:8888
注意:中间服务器由后端创建,跨域问题只存在于浏览器,服务器之间不存在跨域问题
3、CORS跨域资源共享(后端操作)
服务器端进行配置,加一个响应头,是工作中常用的解决方案:
'Access-Control-Allow-Origin','*',表示接受任意域名的请求