Vue初探——关于vue使用axios跨域问题的解决方案

简介: 关于vue使用axios跨域问题的解决方案

目录

后端采用cors实现跨域

前端使用http-proxy-middleware 代理来实现跨域


Vue官方推荐使用axios,是轻量版的ajax,来实现前后端交互。

当前端调用后端的一个getPersionInformation api时,没有成功,打开chrome控制台时,报以下错误:

image.png

这是很明显的跨域问题:P

上面特殊的是:

虽然Status Code是200

但Request Method: OPTIONS

这里的OPTIONS是啥东西?

axios官方文档的解释大概的意思是:浏览器自动在跨域的 GET 请求发送之前发送一个 OPTIONS 请求,以判断服务端是否允许这一域访问。

因此服务器端(即后端)除了要有跨域头之外还要允许的 header 头。

后端采用cors实现跨域

那后端怎么实现呢?W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing(跨域资源共享))。通过它,后端开发者就可以决定资源是否能被跨域访问。只要服务端实现了CORS接口,就可以跨源通信。

由于后端采用了springboot,springmvc早已经支持了对cors的支持,springboot完美地继承了对其支持。

@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurerAdapter{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }

image.gif

只要进行如上配置,就能全局配置了。注意“/**”代表允许所有路径。也可以对registry进行自定义的属性配置~~

当然springboot还提供了一个很简单的注解就能实现跨域的功能@CrossOrigin

@CrossOrigin(origins = "http://192.xx.xx.xx:8080", maxAge = 3600)
@RestController
public class UserController{
    @GetMapping("/getPersonalInformation")
    public String getUser() {
        //具体的操作--
    }
}

image.gif

如上使用这个注解,其只对指定的类中的所有方法起效。如果@CrossOrigin加在具体方法的上面,那就只对该方法起效。这样方便细粒化控制。

如果觉得文章对你有帮助,欢迎关注微信公众号:小牛呼噜噜

按理说这样就可以了,事实上当初的确可以了,但最近一次demo这样做发现不行。有点玄学的意味~~

前端使用http-proxy-middleware 代理来实现跨域

既然这样有时候不太行,那就换一条思路,对前端使用http-proxy-middleware 代理

由于前端是Vue,那我们自己来修改配置,来实现http-proxy-middleware的简单使用

1.打开config/index.js,proxyTable中添写如下代码:

proxyTable: {
  '/api': {
    target:'http://112.74.xx.xxx:8080', // 你接口的域名
//secure: false,      // 如果是https接口,需要配置这个参数
    changeOrigin:true, // 如果接口跨域,需要进行这个参数配置
    pathRewrite: {
      '^/api':'http://112.74.xx.xxx:8080'
    }
  }
},

image.gif

注意:changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,所以这只适用于开发环境

2.使用axios发送get请求时直接使用“/api”:

getPersonalInformation:function () {
 var token='Bearer '+sessionStorage.getItem("Token");
 let config = {
   headers: {
     'Authorization':token
   }
 };//将token放入header中,如果没有请忽略
 console.log(token);
 var url = "
/api/getPersonalInformation";
 console.log(url);
 this.$axios.get(url,config).then(res=> {
   console.log(res);
 }) .catch( res => {
 console.log(res);
})

}

 

其原理:

前端访问http://112.74.xx.xxxx:8080:/getPersonalInformation 就当于访问了:localhost:8080/api/getPersonalInformation(其中localhost:8080是虚拟服务端的IP和端口)。然后在index.js中的proxyTable中拦截了/api,并把/api及其前面的所有替换成了target中的内容,因此实际访问Url是http://api/getPersonalInformation

3.如果是生产环境的话,那就一般可以用nginx来实现跨域。

修改nginx配置文件
location /api {
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass http://112.74.xx.xxxx:8080;
}
image.gif

即可。

这样项目前后端交互就能正常工作了。

ps:然后我把后端cors配置全部注释掉,发现又不行了。最近这个demo很玄学,必须前后端都进行跨域处理,才能正常交互~~  :P。

参考:

使用说明 · Axios 中文说明 · 看云

axios - npm



相关文章
|
2月前
|
资源调度 JavaScript
|
2月前
|
缓存 JavaScript 搜索推荐
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
132 4
|
4月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
4月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
3月前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
3月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
3月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
44 4
|
3月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
64 0
vue配合axios连接express搭建的node服务器接口_简单案例