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

之前做了一个小项目，采用前后端分离的架构（Vue+pringBoot），遇到了跨域的问题，简单记录一下~~

---

目录

后端采用cors实现跨域

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

---

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

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

这是很明显的跨域问题：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("/**");
    }

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

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

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

如上使用这个注解，其只对指定的类中的所有方法起效。如果@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'
    }
  }
},

注意：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;
}

即可。

 

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

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

参考：

https://www.kancloud.cn/yunye/axios/234845

https://www.npmjs.com/package/axios

http://www.ruanyifeng.com/blog/2016/04/cors.html

https://github.com/chimurai/http-proxy-middleware#compatible-servers