前端vue打包项目,如何解决跨域问题

 更新时间:2022年05月06日 08:40:06   作者:马克Markorg  
这篇文章主要介绍了前端vue打包项目,如何解决跨域问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue打包项目解决跨域

前段时间做一个vue打包成安卓和IOS的App,遇到了跨域问题,直接拿了之前项目的配置,却不起作用。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .maxAge(3600);
    }
    
}

但是还是不行,后面查明是因为之前项目nginx和项目在一个服务器,而APP的前端是在移动端的。解决方法有所不同,如下

import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
 
@Configuration
public class LakeAppConfigurer extends WebMvcConfigurerAdapter {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS")
                .exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L)
                .maxAge(3600);
    }
}

完美解决。 

vue项目解决跨域(打包上线无需手动切换url)

1、在目录config下的index.js中设置代理;

proxyTable: { //设置代理
'/api': { //使用"/api"来代替跨域地址139.xxx.xx
target: 'http://139.xxx.xx', //源地址
changeOrigin: true, //改变源
pathRewrite: { //路径重写
'^/api': 'http://139.xxx.xx'
}
}
},

2、分别配置开发环境和生产环境地址

在config目录下dev.env.js中配置开发路径:

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"/api"' // 配置代理路径的符号,增加的内容
})

在config目录下prod.env.js中配置开发路径:

module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://139.xxx.xx"' // 生产环境地址,增加的内容
}

3、在组建中进行使用,这里使用vue-resource;

//process.env.API_HOST 获取当前环境的api地址
methods:{
getData: function(){
this.$http.get(process.env.API_HOST + '/AiaaScadaSys/MonitorDB/info').then((response)=>{
this.$data.data_jianhuyi = response.body[0];
console.log(this.data_jianhuyi);
}, (response)=>{
return response.json();
});
},
}

小结:经过这样的配置后可以比较完美的解决跨域的问题而不用担心在打包上线的时候还要手动修改api地址,而且维护成本也低。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 实现树形视图数据功能

    Vue 实现树形视图数据功能

    这篇文章主要介绍了Vue 实现树形视图数据功能,利用简单的树形视图实现的,在实现过程中熟悉了组件的递归使用,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • 深入了解Vue2中的的双端diff算法

    深入了解Vue2中的的双端diff算法

    双端Diff在可以解决更多简单Diff算法处理不了的场景,且比简单Diff算法性能更好。本文主要来和大家详细讲讲Vue2中的双端diff算法的实现与使用,需要的可以参考一下
    2023-02-02
  • webstorm建立vue-cli脚手架的傻瓜式教程

    webstorm建立vue-cli脚手架的傻瓜式教程

    这篇文章主要给大家介绍了关于webstorm建立vue-cli脚手架的傻瓜式教程,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 在Vue2中v-model和.sync区别解析

    在Vue2中v-model和.sync区别解析

    在vue2中提供了.sync修饰符,但是在vue3中不再支持.sync,取而代之的是v-model,本文给大家介绍在Vue2中v-model和.sync区别,感兴趣的朋友一起看看吧
    2023-10-10
  • vue mixins组件复用的几种方式(小结)

    vue mixins组件复用的几种方式(小结)

    这篇文章主要介绍了vue mixins组件复用的几种方式(小结),vue中提供了一种混合机制mixins,用来更高效的实现组件内容的复用,有兴趣的可以了解一下
    2017-09-09
  • vue使用keep-alive如何实现多页签并支持强制刷新

    vue使用keep-alive如何实现多页签并支持强制刷新

    这篇文章主要介绍了vue使用keep-alive如何实现多页签并支持强制刷新,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue 二维码长按保存和复制内容操作

    vue 二维码长按保存和复制内容操作

    这篇文章主要介绍了vue 二维码长按保存和复制内容操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue2.0获取鼠标位置的方法

    vue2.0获取鼠标位置的方法

    今天小编就为大家分享一篇vue2.0获取鼠标位置的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 浅析vue.js数组的变异方法

    浅析vue.js数组的变异方法

    本篇文章给大家分享了vue.js数组的变异方法的相关内容,有兴趣的朋友跟着学习参考下。
    2018-06-06
  • Vue自动构建发布脚本的方法示例

    Vue自动构建发布脚本的方法示例

    这篇文章主要介绍了Vue自动构建发布脚本的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论