iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >前端vue打包项目,如何解决跨域问题
  • 388
分享到

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

2024-04-02 19:04:59 388人浏览 泡泡鱼
摘要

目录Vue打包项目解决跨域vue项目解决跨域(打包上线无需手动切换url)vue打包项目解决跨域 前段时间做一个vue打包成安卓和iOS的App,遇到了跨域问题,直接拿了之前项目的配

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地址,而且维护成本也低。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

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

本文链接: https://www.lsjlt.com/news/148012.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 前端vue打包项目,如何解决跨域问题
    目录vue打包项目解决跨域vue项目解决跨域(打包上线无需手动切换url)vue打包项目解决跨域 前段时间做一个vue打包成安卓和IOS的App,遇到了跨域问题,直接拿了之前项目的配...
    99+
    2022-11-13
  • Vue项目中该如何解决跨域问题
    目录跨域同源策略express服务器vue处理跨域express处理跨域总结跨域 跨域报错是前端开发中非常经典的一个错误,报错如下  Access to XMLHttpRe...
    99+
    2022-11-13
  • vue如何解决axios请求前端跨域问题
    目录前言一、为什么会出现跨域的问题?二、解决方案跨域资源共享(CORS)写在最后前言 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问...
    99+
    2022-11-12
  • Vue项目中怎么解决跨域问题
    本篇内容主要讲解“Vue项目中怎么解决跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue项目中怎么解决跨域问题”吧!跨域跨域报错是前端开发中非常经典的一个错误,报错如下 Ac...
    99+
    2023-07-02
  • 如何解决vue2中前后端分离项目ajax跨域session的问题
    这篇文章将为大家详细讲解有关如何解决vue2中前后端分离项目ajax跨域session的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。实现跨域请求时,每次ajax请求...
    99+
    2022-10-19
  • 如何在前端中解决跨域问题
    如何在前端中解决跨域问题?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.)&...
    99+
    2023-06-15
  • vue项目配置代理如何解决跨域问题
    目录Vue项目配置代理1. 这里以axios发请求为例2. 如果发送的请求都以 /abc 开头3. 代理多个接口什么是跨域?配置(vue.config.js)总结Vue项目配置代理 ...
    99+
    2023-01-28
    vue项目配置代理 vue跨域 vue配置代理
  • vue项目部署跨域问题怎么解决
    这篇文章主要介绍“vue项目部署跨域问题怎么解决”,在日常操作中,相信很多人在vue项目部署跨域问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目部署跨域问题怎么解决”的疑惑有所帮助!接下来...
    99+
    2023-06-30
  • vue如何解决axios请求出现前端跨域问题
    本篇内容主要讲解“vue如何解决axios请求出现前端跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何解决axios请求出现前端跨域问题”吧!在...
    99+
    2022-10-19
  • web前端网络跨域问题如何解决
    今天小编给大家分享一下web前端网络跨域问题如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。什么是跨域浏览器有一个重要...
    99+
    2023-07-02
  • 解决vue项目中前后端交互的跨域问题、nginx代理配置方式
    目录vue前后端交互的跨域问题、nginx代理配置1.安装axios2.解决跨域问题前后端分离项目的跨域问题及解决跨域简述解决办法vue前后端交互的跨域问题、nginx代理配置 最近...
    99+
    2022-11-13
  • 前后端分离项目跨域问题No ‘Access-Control-Allow-Origin‘解决方案
    一.问题背景 前后端分离项目跨域问题,浏览器控制台报错:No 'Access-Control-Allow-Origin' header is present on the requested resource. 请求方法为OPTIONS,...
    99+
    2023-08-31
    服务器 java linux Powered by 金山文档
  • Nginx如何解决前端跨域问题以及CORS跨域配置
    Nginx如何解决前端跨域问题以及CORS跨域配置,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Nginx的CORS配置,网上太多这配置了,但大家更多的复制粘贴...
    99+
    2023-06-04
  • 如何解决VueJs前后端分离跨域问题
    这篇文章给大家分享的是有关如何解决VueJs前后端分离跨域问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。使用vue-cli搭建的vue项目可以使用在项目内设置代理(proxy...
    99+
    2022-10-19
  • VUE如何解决跨域问题
    这篇文章主要介绍“VUE如何解决跨域问题”,在日常操作中,相信很多人在VUE如何解决跨域问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VUE如何解决跨域问题”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-07-02
  • webpack4如何打包vue前端多页面项目
    这篇文章主要介绍webpack4如何打包vue前端多页面项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.用法项目结构如下:project  |- bulid...
    99+
    2022-10-19
  • 如何解决vue打包项目后刷新404的问题
    这篇文章主要介绍了如何解决vue打包项目后刷新404的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。vue打包项目后刷新404的问题Ng...
    99+
    2022-10-19
  • 如何解决vue项目打包后文件过大问题
    目录为什么打包后文件过大?如何快速解决1.路由懒加载【使用es6提案的import()方式】2.CDN引入为什么打包后文件过大? 移动app项目,使用vue-cli脚手架搭建,UI主...
    99+
    2022-11-13
  • vue项目部署跨域问题的详细解决过程
    目录首先是后端:再是前端:总结跨域问题在前后端分离项目很常见,至于为什么会跨域,同源策略,百度各种博客都很详细,这里不再介绍,主要记录项目中的各种设置,解决的过程。 首先是后端: 过...
    99+
    2022-11-13
  • vue项目实现webpack配置代理,解决跨域问题
    目录webpack配置代理,解决跨域主要是这句话vue跨域问题,修改代理后仍404接口请求用法webpack配置代理,解决跨域 在config文件夹中的index.js文件配置 主要...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作