No 'Access-Control-Allow-Origin' header is present on the requested resource,跨域问题解决方案小结

前言

最近的两次开发在试用axios时被这个问题所困扰,网上也有很多层出不穷的回复,包括知乎上也有,所以我就来做个小结。


1.Jsonp

可以引入vue-resource,然后使用

或者是原生JS设置type为jsonp

2.插件:http-proxy-middleware

https://github.com/chimurai/http-proxy-middleware

2.1 vue-cli的配置(用到的也是http-proxy-middleware)

如果是vue-cli搭建的项目,在config下有个index.js文件,然后有一个proxyTable的参数,可以进行以下两种配置方式,原来的服务器是localhost:4567,需要配置的是localhost:8089


vue-cli-001


3.Nginx

配置代理服务器。

或者修改header


nginx跨域解决方案配置

4.服务器端配置

可以在API上配置以下配置,意思是所有的url都可以访问,缺点是安全性不高。

responce.header("Access-Control-Allow-Origin","*");

5.[CORS](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS)


小结

总的来说解决跨域问题最优的解决方案是通过配置代理服务器,将url转成想要的服务器的URL。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容