前端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实现echarts饼图/柱状图点击事件实例

    vue实现echarts饼图/柱状图点击事件实例

    echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,下面这篇文章主要给大家介绍了关于vue实现echarts饼图/柱状图点击事件的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue路由的配置和页面切换详解

    vue路由的配置和页面切换详解

    这篇文章主要给大家介绍了关于vue路由的配置和页面切换的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Vue封装的标准漏斗图教程

    Vue封装的标准漏斗图教程

    文章展示了基于Vue封装的标准漏斗图的代码,包括权重算法、滚轮监听和点击示例功能,旨在提供实用的图表展示技巧
    2025-02-02
  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    本篇文章主要介绍了基于vue监听滚动事件实现锚点链接平滑滚动的方法,非常具有实用价值,有兴趣的可以了解一下
    2018-01-01
  • vue3+element-plus动态路由菜单示例代码

    vue3+element-plus动态路由菜单示例代码

    这篇文章主要介绍了vue3+element-plus动态路由菜单示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • vue electron实现无边框窗口示例详解

    vue electron实现无边框窗口示例详解

    这篇文章主要为大家介绍了vue electron实现无边框窗口示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue开发环境的搭建全过程

    Vue开发环境的搭建全过程

    文章介绍了在网页中使用Vue.js的四种方式:基本方式、脚手架方式(Vue2.0)、使用WebStorm集成环境创建vue-cli项目(Vue3.0)以及Vue项目的目录结构,每种方式都有详细的步骤和示例,帮助读者快速上手Vue.js开发
    2024-11-11
  • el-select如何获取当前选中的对象所有(item)数据

    el-select如何获取当前选中的对象所有(item)数据

    在开发业务场景中我们通常遇到一些奇怪的需求,下面这篇文章主要给大家介绍了关于el-select如何获取当前选中的对象所有(item)数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue 循环动态设置ref并获取$refs方式

    vue 循环动态设置ref并获取$refs方式

    这篇文章主要介绍了vue 循环动态设置ref并获取$refs方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue实现顶部菜单栏

    vue实现顶部菜单栏

    这篇文章主要为大家详细介绍了vue实现顶部菜单栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11

最新评论