VUE + SSM + MAVEN的axios请求跨域问题解决

要明白什么是跨域之前，首先要明白什么是同源策略？
同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同源呢？

如果协议，端口（如果指定了）和主机对于两个页面是相同的，则两个页面具有相同的源，也就是同源。也就是说，要同时满足以下3个条件，才能叫同源：

协议相同
端口相同
主机相同

举个例子就一目了然了：
我们来看下面的页面是否与 http://localhost:8080/pages/login.html 是同源的？

http://localhost:8080/pages//index.html 同源
http://localhost:8080/pages/dir2/index2.html 同源虽然在不同文件夹下
https://localhost:8080/pages/login.html 不同源不同的协议(https)
http://localhost:8888/pages/login.html 不同源不同的端口(8888)
http://66.66.66.66:8080/pages/login.html l 不同源不同的主机

所以当面对跨域问题的时候，怎么解决呢？
以下是个人解决的方法
1. 在pom.xml加入坐标

	<!-- 与跨域过滤器相关 -->
    <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>java-property-utils</artifactId>
      <version>1.9.1</version>
    </dependency>
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.6.2</version>
    </dependency>
    <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>cors-filter</artifactId>
      <version>2.5</version>
    </dependency>

在web.xml配置处理跨域请求的过滤器

<!-- 解决vue axios请求跨域问题的过滤器 -->
  <filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    <init-param>
      <!--服务器允许跨域请求的域名(*表示全部均可)-->
      <param-name>cors.allowOrigin</param-name>
      <param-value>*</param-value>
    </init-param>
    <init-param>
      <!--服务端支持的请求方法(*表示全部均可)-->
      <param-name>cors.supportedMethods</param-name>
      <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
    </init-param>
    <init-param>
      <!--允许返回给跨域请求的响应头列表-->
      <param-name>cors.supportedHeaders</param-name>
      <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
    </init-param>
    <init-param>
      <!-- 允许返回给跨域请求的响应头列表-->
      <param-name>cors.exposedHeaders</param-name>
      <param-value>Set-Cookie</param-value>
    </init-param>
    <init-param>
      <!--告知浏览器当withCredentials属性设置为true时，是否可以显示跨域请求返回的内容。
      简单请求时，浏览器会根据此响应头决定是否显示响应的内容。
      预先验证请求时，浏览器会根据此响应头决定在发送实际跨域请求时，是否携带认证信息。-->
      <param-name>cors.supportsCredentials</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

网上很多关于该问题的解决是编写JAVA类或者编辑springmvc.xml文件进行配置的，但是我在当时用时亲测无效，以上是个人有效的解决方案

VUE + SSM + MAVEN的axios请求跨域问题解决

猜你喜欢