Vue跨域问题

最新推荐文章于 2025-06-01 01:45:00 发布

原创最新推荐文章于 2025-06-01 01:45:00 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue跨域 #CORSFilter #后台跨域 #Web.xml跨域

Java 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了解决Vue项目中跨域问题的方法。一是通过配置后台服务的web.xml文件实现跨域支持；二是对于调用第三方服务的情况，介绍了如何利用vue-resource中的jsonp进行跨域请求。

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

用Vue搭建了一个前后端完全分离的DEMO项目，由于前后端的端口不一致，存在跨域问题。

解决方法是，在后台服务程序的web.xml中配置如下过滤器即可：

<filter>
        <description>跨域过滤器</description>
        <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>
            <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>

涉及到的JAR包有java-property-utils-1.10.jar，cors-filter-2.6.jar，（gson-2.8.1.jar这个是我用来处理JSON的，非必要）

下载路径：

cors-filter-2.6.jar-------------->http://download.youkuaiyun.com/download/u012557538/9932159

java-property-utils-1.10.jar-------------->http://download.youkuaiyun.com/download/u012557538/9932157

二：上面方法是服务端由自己搭建才可使用，若调用第三方的服务，则需要用到vue-resource中的Jsonp，

官方手册：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

使用方法很简单

1.安装:npm install vue-resource --save

2.引入：

import r from 'vue-resource'
import v from 'vue'

v.use(r)

然后在需要的地方使用：

this.$http.jsonp('https://api.douban.com/v2/book/1003078').then(response => {
  console.log(response.body)
})