关于vue中的跨域问题
我们在使用vue框架的时候,难免遇到跨域的问题。当然解决跨域问题的方法有很多,那我就说说在我遇到跨域问题的时候是如何解决的吧。在我请求一个后台接口的时候,浏览器报错,报错的信息就是告诉我跨域了,没法弄了。然而这时候又不能让后台修改代码,只好在前端设置相应的代码了。OK,不废话了,直接说如何解决问题吧。就是在config下的index.js中配置相关代码。具体代码见下图其中,target是接口域名,
·
我们在使用vue框架的时候,难免遇到跨域的问题。当然解决跨域问题的方法有很多,那我就说说在我遇到跨域问题的时候是如何解决的吧。
在我请求一个后台接口的时候,浏览器报错,报错的信息就是告诉我跨域了,没法弄了。然而这时候又不能让后台修改代码,只好在前端设置相应的代码了。OK,不废话了,直接说如何解决问题吧。
就是在config下的index.js中配置相关代码。具体代码见下图
其中,target是接口域名,即http://xxxx.com的形式;changeOrigin为true,设置是否跨域;pathRewrite设置重写的路径。
- 假设你主机名为 localhost:8080 , 请求 API 的 url 是 http://your_api_server.com/user/list
- '/apis':如果点击某个按钮,触发请求 API 事件,这时请求 url 是
http://localhost:8080/apis/user/list
。 - changeOrigin:如果 true ,那么
http://localhost:8080/apis/user/list 变为 http://your_api_server.com/apis/user/list
。但还不是我们要的 url 。 - pathRewrite:重写路径。匹配 /proxy ,然后变为
''
,那么 url 最终为http://your_api_server.com/user/list
。
config配置好之后,接下来就是你要请求的接口的位置怎么写了
只需要把你要请求的域名地址改为刚刚设置的重写的路径就好了,后面该拼接参数就拼接参数。
需要改动的代码就这些了,是不是很简洁呢?
最后,不要忘了改动配置文件后需要重启服务,这样才会有效哦!
更多推荐
已为社区贡献5条内容
所有评论(0)