对于如何解决vue.js跨域问题的方法

最新推荐文章于 2025-03-25 15:20:33 发布

luolvzhou

最新推荐文章于 2025-03-25 15:20:33 发布

阅读量498

点赞数

分类专栏：前端Vue框架 java

本文链接：https://blog.youkuaiyun.com/luolvzhou/article/details/90256987

版权

前端Vue框架同时被 2 个专栏收录

12 篇文章

订阅专栏

java

9 篇文章

订阅专栏

本文详细解析Vue.js中使用axios进行跨域请求时遇到的Cors问题，并提供具体解决方案，包括在后端配置CORS过滤器及前端设置请求头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

各位大佬，今天我想在这写点东西，关于昨天一直无法解决的vue.js跨域问题的请求。在此有一定深入的解析和探讨。昨天遇到的问题是在vue的methods里面加入了一个方法，当然这个方法是被绑定在一个提交表单的按钮上，在这个方法中运用的是axios进行数据传输和通信的协议。这个axios与ajax是一样的用法，都是可以进行前端到后台的数据传输。那么axios进行跨域传输的时候，比如前台起来的路径是http://localhost:8080/，要访问的后台tomcat服务器起来的路径是http://localhost:8090/RegistServlet 进行跨域请求传输，但是在传输的过程中虽然状态是200 ，但是由于浏览器拦截出现Cors问题，导致传输失败出现网络问题

Access-Control-Allow-Origin header头不存在便是主要问题。所以为了解决这个Cors问题，我们在后台启动了一个maven项目，在内部导入了一个拦截器的包

<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>2.6</version>
</dependency>
然后，在web.xml中写了一层拦截器<filter>

<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, Access-Control-Allow-Origin</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<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>

这时候在项目中创建一个servlet，别忘了导入servlet的包，跟上面一样<dependency></dependency>

然后别忘了web.xml中照常引入<servlet>和<servlet-mapping>

最后在前台的axios中需要引入 headers:{ 'Access-Control-Allow-Origin':'*' }

axios.post('http://localhost:8090/RegistServlet', {

},{
    headers: {
        'Access-Control-Allow-Origin':'*'
 }
})
    .then(function (response) {
       alert(response);
    })
    .catch(function (error) {
        alert(error);
    });

这样就可以实现跨域请求了。