iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目打包部署跨域的实现步骤
  • 490
分享到

vue项目打包部署跨域的实现步骤

vue打包部署跨域vue打包跨域 2023-05-20 11:05:48 490人浏览 八月长安
摘要

目录1.前端工程解决办法1.1开发时候解决办法1.2打包部署后解决办法2.后端工程解决办法跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 Http 头的机制,该机制通过

跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 Http 头的机制,该机制通过允许服务器标示除了它自己以外的其他源(域、协议或端口),使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中,浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。跨源 HTTP 请求的一个例子:运行在 https://domain-a.com 的 javascript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.JSON 的请求(也就是Vue的axiOS,或者Jqueryajax请求)。

出于安全性,浏览器限制脚本内发起的跨源 HTTP 请求。例如,XMLHttpRequest 和 Fetch api 遵循同源策略。这意味着使用这些 API 的 WEB 应用程序只能从加载应用程序的同一个域请求 HTTP 资源,除非响应报文包含了正确 CORS 响应头。

vue等前端工程在打包部署后,避免不了跨域问题。很让人抓狂,尤其是新手。其实解决起来也不难。

1.前端工程解决办法

1.1开发时候解决办法

在vue的开发中可以配置代理,来解决跨域问题,以vue3的vite为例:
比如我们的后端接口地址前缀为:http://192.168.1.2/api/v1/,在vite中就可以这样配置代理:

# 跨域代理,您可以配置多个 ,请注意,没有换行符
VITE_PROXY = [["/api/v1","http://192.168.1.2/api/v1"]]
#接口地址(程序中使用的地址)
VITE_API_URL=/api/v1

1.2打包部署后解决办法

vue项目打包后编译成静态js了,vite的代理就不能用了,一般我们都是用Nginx来直接部署打包后的程序,我们就可以在nginx中配置反向代理来解决:

server{
	listen 80;
	server_name localhost;
	index    index.html index.htm;
	root   /var/www/dist;
	error_log   logs/localhost_error.log crit;
	access_log  logs/localhost_access.log  access;
	# 接口地址反代
    location /api/v1/ {
	    proxy_pass http://192.168.1.2/api/v1/;
	    proxy_redirect off;
	    proxy_set_header HOST $host;
	    proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	    proxy_set_header X-Forwarded-Proto  $scheme;
	}
	rewrite ^(.*)\;(.*)$ $1 last;
	location ~* \.(eot|ttf|woff|woff2|svg|otf|html|htm|pdf|PDF|mp4|MP4)$ {
		add_header Access-Control-Allow-Origin *;
	}
	add_header Access-Control-Allow-Origin *;
}

2.后端工程解决办法

也可以在后端工程中配置跨域,在SpringBoot中新建CorsConfig.java配置类,在其中加入如下Bean:

spring Webmvc中:

package com.example.config;
import org.springframework.context.annotation.Bean;
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.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                    .allowedOriginPatterns("*") //允许跨域的域名,可以用*表示允许任何域名使用
                    .allowedMethods("*") //允许任何方法(post、get等)
                    .allowedHeaders("*") //允许任何请求头
                    .allowCredentials(true) //带上cookie信息
                    .exposedHeaders(HttpHeaders.SET_COOKIE)
                    .maxAge(3600L); //maxAge(3600)表明在3600秒内,不需要再发送预检验请求,可以缓存该结果
            }
        };
    }
}

在Spring WebFlux中:

package com.example.config;
import org.springframework.boot.autoconfigure.AutoConfigureOrder;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.http.HttpHeaders;
import org.springframework.web.Reactive.config.CorsRegistry;
import org.springframework.web.reactive.config.EnableWebFlux;
import org.springframework.web.reactive.config.WebFluxConfigurer;
@Configuration
public class CorsConfig implements WebFluxConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**")
                    .allowedOriginPatterns("*") //允许跨域的域名,可以用*表示允许任何域名使用
                    .allowedMethods("*") //允许任何方法(post、get等)
                    .allowedHeaders("*") //允许任何请求头
                    .allowCredentials(true) //带上cookie信息
                    .exposedHeaders(HttpHeaders.SET_COOKIE)
                    .maxAge(3600L); //maxAge(3600)表明在3600秒内,不需要再发送预检验请求,可以缓存该结果
    }
}

到此这篇关于vue项目打包部署跨域的实现步骤的文章就介绍到这了,更多相关vue 打包部署跨域内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue项目打包部署跨域的实现步骤

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

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

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

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

下载Word文档
猜你喜欢
  • vue项目打包部署跨域的实现步骤
    目录1.前端工程解决办法1.1开发时候解决办法1.2打包部署后解决办法2.后端工程解决办法跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过...
    99+
    2023-05-20
    vue 打包部署跨域 vue 打包跨域
  • vue项目打包部署跨域怎么实现
    本篇文章和大家了解一下vue项目打包部署跨域怎么实现。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的...
    99+
    2023-07-06
  • Vue项目打包部署到GitHubPages的实现步骤
    目录前言前期准备重要说明步骤1步骤2步骤3步骤4步骤5步骤6前言 关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再...
    99+
    2022-11-13
  • docker部署vue项目的实现步骤
    目录前戏部署获取nginx镜像创建 nginx config配置文件创建Dockerfile文件生成生成环境包构建docker镜像查看本地镜像启动docker容器访问跨域前戏 当我们...
    99+
    2022-11-13
  • go项目打包部署的完整步骤
    目录1.go项目在window下编译简易打包2.项目在window下打包成其他系统可运行的文件3.项目在Mac下打包成其他系统可运行的文件5.使用goreleaser多平台打包总结1...
    99+
    2022-11-11
  • vue项目打包后部署到服务器的详细步骤
    耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一...
    99+
    2022-11-13
  • Vue项目打包并部署nginx服务器的详细步骤
    目录使用场景:一.打包二.部署(nginx)总结使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署。 一.打包 vue项目其实可以直接通过一下语句进行打包: np...
    99+
    2022-11-13
  • docker部署springboot和vue项目的实现步骤
    目录A. docker 部署 springboot项目一、springboot项目编译打包二、在项目根目录创建Dockerfile文件三、在根目录执行,形成docker镜像四、运行项...
    99+
    2022-11-12
  • Flask项目的部署的实现步骤
    目录宝塔更新Python版本更改默认的Python版本项目部署设置映射宝塔更新Python版本 因为在宝塔中的Python版本为2.6.8,使用宝塔Python项目管理的话需要把Py...
    99+
    2022-11-10
  • Qt项目打包的实现步骤
    目录准备项目文件用InstallShield解决打包后自动启动cmd窗口的问题准备项目文件 本质上就是把依赖的动态库放到你指定的文件夹里面去;这样在其他电脑上运行时,就不需要再安装q...
    99+
    2022-11-13
  • vue项目打包以及优化的实现步骤
    目录vue项目的打包上线及优化vue项目的打包项目托管项目的常见优化vue项目的打包上线及优化 项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项...
    99+
    2022-11-12
  • pyinstaller打包django项目的实现步骤
    安装pyinstaller pip install pyinstaller 制作项目的.spec文件   进入django项目所在路径,运行 pyi-makes...
    99+
    2022-11-12
  • electron打包vue项目的方法步骤
    目录创建项目添加electron-builderelectron下载失败窗体运行打包exe白屏创建项目 点击这里 添加electron-builder 1、在项目目录下运行命令:vu...
    99+
    2022-11-13
  • Docker搭建Jenkins并自动化打包部署项目的步骤
    Jenkins的安装及配置 Docker环境下的安装 下载Jenkins的Docker镜像: docker pull jenkins/jenkins:lts 在Docker容器中运行...
    99+
    2022-11-13
  • Vue项目打包部署的实战过程记录
    目录前言一、准备工作——服务器和nginx使用1. 准备一台服务器2. nginx安装和启动3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件二、Vue...
    99+
    2022-11-12
  • 使用Docker部署SpringBoot项目的实现步骤
    目录创建一个简单的springboot项目一、在 pom.xml 中 ,使用 Spring Boot 2.2.10 相关依赖二、添加 web 和测试依赖三、创建一个 DockerCo...
    99+
    2022-11-12
  • 腾讯云部署javaWeb项目的实现步骤
    目录1.登录腾讯云2.安装java环境3.配置环境变量4.安装tomcat1、启动tomcat2、开放8080端口5.上传部署java WEB项目1.登录腾讯云 点击登录选择浏览器登...
    99+
    2022-11-12
  • Vue中的项目打包及部署全流程
    目录一、打包遇到的第一个问题问题二:文件找不到二、服务器部署1、解压2、用法3、Vue项目build后4、配置nginx正式开始将项目推送到自己服务器上CentOS操作系统的部署一、...
    99+
    2022-11-13
    Vue项目打包 Vue项目打包部署 Vue 打包部署
  • 云服务器部署 Web 项目的实现步骤
    目录一: 搭建 java 部署环境1: 安装 JDK2: 安装 Tomcat总结如何验证tomcat是否启动成功3: 安装 mysql二: 部署 web 项目1: 给服务器准备好依赖的数据2: 微调我们的 Java 代码...
    99+
    2022-06-28
    云服务器部署Web 云服务器部署
  • SpringBoot项目部署到腾讯云的实现步骤
    目录将SpringBoot项目部署到腾讯云1、下载MySql2、导入sql文件3、下载JDK4、将本地程序打包成jar5、腾讯云部署jar将SpringBoot项目部署到腾讯云 注意...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作