关于跨域访问解决方案总结

跨域解决方案:

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,

然而回调函数不执行。