关于跨域访问解决方案总结
跨域解决方案:
1.将dataType设置为jsonp格式,该方案为客户端解决方案
2.通过设置Access-Control-Allow-Origin来实现跨域访问,该方案为服务器端解决方案(CORS)
fetch跨域解决:
1.CORS
服务器不支持 CORS, 则不用使用 Fetch Api 了,`Fetch Api` 必须后台支持 `CORS`。
如果你设置了 `{mode: ' cors '}`(一般用于请求API):
就会报错告诉你:
如果设置成 `{mode: ' no-cors '}` (一般用于请求图片等静态资源):
虽然不会报错,但是结果会 返回被标记了为 `opaque` 的数据,表明你没有权限访问。
设置了no-cors以后就不会发送跨域请求了,所以返回 status=0,可以请求成功,但拿不到服务器返回数据,它被标记了'opaque',请求没发出去。
这种情况下可以使用 JSONP。
2.JSONP
<img>
的src(获取图片),<link>
的href(获取css),<script>
的src(获取javascript)这三个都不符合同源策略,它们可以跨域获取数据。这里要介绍的JSONP就是利用<script>
的src来实现跨域获取数据的。jsonp中只有GET传输是合法的。
1)动态添加<script>
所以总结其实jsonp的一个核心点:允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
仍存在问题:
在src中指定回调函数callback,
然而回调函数不执行。