vuecli3打包部署到nginx，跨域问题处理

最新推荐文章于 2024-08-11 13:18:04 发布

小杨小杨神采飞扬

最新推荐文章于 2024-08-11 13:18:04 发布

阅读量4.8k

点赞数 8

分类专栏： web 文章标签： vuejs

本文链接：https://blog.csdn.net/qq_35437791/article/details/97271373

版权

本文介绍了如何使用VueCLI3打包应用并部署到Nginx，同时解决跨域问题。通过编辑vue.config.js进行配置，并在Nginx中设置反向代理，实现了Ajax跨域访问。详细步骤包括：查看vue.config.js配置，打包应用，编辑nginx.conf，放置打包文件，以及使用Nginx命令重载配置。

摘要由CSDN通过智能技术生成

vuecli3打包部署到nginx，跨域问题处理

一、vuecli3后目录的build和config文件夹都没有了，大部分合成在vue.config.js，具体配置看 https://cli.vuejs.org/zh/config

其中常见的跨域处理：

devServer: {
   
   proxy: {
   
     '^/proxy': {
   
       target: 'http://127.0.0.1:8100',
       changeOrigin: true

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小杨小杨神采飞扬

关注关注

8
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VueCli生产环境打包部署跨域失败的解决

01-18

常见的跨域配置(/config/index.js): proxyTable: { '/api': { target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名 // secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin） pathRewrite: { '^/api': '' //本身的接口地址没有 '/

vuecli3打包后出现跨域问题，前端配置拦截器无效

qq_45626867的博客

09-01

2447

问题这几天在把项目弄好，打包完成后发现之前cli配置的拦截器没有在打包后没起到作用，使用别的方法通过nginx反向代理进行配置跨域。解决方案在nginx里面的nginx.config里面配置配置如下 server { listen 80;#监听端口 server_name localhost;#代理服务地址 add_header Access-Control-Allow-Origin *; location / {

1 条评论您还未登录，请先登录后发表或查看评论

vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上

最新发布

朱豪凯的博客

08-11

1303

介绍vue3中怎么打包，并部署到Nginx服务器上

vue项目上线打包及跨域问题

zhouzhou69的博客

10-23

4288

到时上线了，前端项目是以静态资源的形式放在nginx下，有nginx代理转发请求；因此前端写的请求地址写成nginx所在的地址，前端静态资源地址（nginx所在的地址）-->请求地址写nginx所在地址===看起来是同一个地址，因此不会存在跨域注：请求地址虽然写的是nginx所在地址，但nginx会做转发代理到真实后端接口。

Vue打包上线后的跨域问题处理

qq_39805327的博客

06-14

783

由于开发环境和生产环境的不同，会导致vue访问出现跨域的问题。

vue项目打包部署跨域解决方案

呐喊的专栏

05-11

6066

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

Vue中跨域及打包部署到nginx跨域设置方法

10-16

本文将详细介绍Vue项目开发中遇到的跨域问题及其解决方法，以及如何将打包后的Vue项目部署到Nginx服务器，并设置跨域。 ### 跨域问题的概述 跨域问题是指由于浏览器的同源策略限制，前端项目中的JavaScript代码...

vuecli3打包部署到nginx.md

07-25

vuecli3打包部署到nginx，跨域问题处理，vuecli3后目录的build和config文件夹都没有了，大部分合成在vue.config.js

解决vue-cli3 使用子目录部署问题

10-18

总的来说，解决Vue CLI 3子目录部署问题的关键在于正确设置 `vue.config.js` 中的 `baseUrl` 和Nginx配置，以及根据需求选择合适的Vue Router模式。确保这些设置正确无误，你的Vue应用就能顺利地在服务器的任何子...

Vue3项目（由Vite构建）中通过代理解决跨域问题

聂可以的博客

05-20

6750

Vue3项目（由Vite构建）中通过代理解决跨域问题

最全vue打包前后的跨域问题,绝对解决你的问题

progrmmmm的博客

10-16

1万+

proxyTable: { '/api': { target: 'http://localhost:9966', changeOrigin: true, ws: true, pathRewrite: { '^/api': '', } } },

【Vue】Docker + Nginx 部署 Vue3.0 项目

热门推荐

寒泉

03-01

6万+

Docker + Nginx 部署 Vue3.0 项目 1、用指令 npm run build 打包vue.js项目（该项目是在WebStorm里面新建的Vue空项目）。打包成功后，会生成一个目录dist 2、把该文件夹拷贝到服务器（操作系统是 Centos7）下的/usr/share目录下 3、在/usr/share目录下新建Dockerfile文件 # 设置基础镜像 FROM ngin...

vue项目打包部署nginx跨域

m0_50013804的博客

06-02

1209

vue项目打包部署nginx跨域 vue项目连接外部api接口时，打包部署到nginx后出现api404，api跨域问题，这个时候需要给vue项目本身进行跨域，再配置nginx中进行跨域即可解决，详见下文。 1. 首先给vue项目加上跨域【使用外部api时】在vue项目中index.js文件中加上代理操作。这里的【target】是我们需要跨域的api路径（接口路径），下面的【"^api"】直接为空。上图为我自己添加的【test.env.js】配置文件，主要在测试环境使用，这里直接把 API_H

vue项目中http请求线上成为https请求

bilibid的博客

11-08

4460

静态资源路径应该是http开头，访问的时候变成了https开头，导致找不到资源，后来发现是这句话搞得鬼。 <meta http-equiv=“Content-Security-Policy” content=“upgrade-insecure-requests”> 这个代码的作用是将站内加载的资源自动将http转为https 如果不需要去掉就可以解决问题 ...

Vue项目部署后Http变成了https

weixin_44362321的博客

03-03

1809

在index.html里面存在这个配置去掉就好了

vue项目从http到https需要做什么ajax修改

jun999

07-08

2561

项目从http迁移到https，请求接口仅需使用相对路径（省略协议名称），在请求时会根据当前页面的协议名称做自动添加。 http://www.baidu.com/api/subject/get 只需配置成 //www.baidu.com/api/subject/get ，即会通过当前页面协议名称做自动匹配添加。如果https的网站中有http协议的资源，发送请求使用相对路径，session是会根据当前协议自动匹配一致。(https页面下的“相对路径”表示的请求都会与页面的协议保持一致) 参考.

vue+express前后端项目一起配置成https请求

柳宁依的博客

08-16

2178

1、首先到阿里云服务器上面申请证书，申请完成以后下载下来（nginx服务版本的），解压出来两个文件，文件后缀是.key和.pem，最好把这两个文件名改成自己的域名。具体申请证书的步骤自行百度。 2、将vue项目里面的config文件夹下面的prod.env.js文件中加上一句：BASE_URL:'"https://xxx.xxx.xx.xxx"'，xxx.xxx.xx.xxx是自己服务器的ip，...

关于解决vue3的跨域问题

m0_74079165的博客

09-29

8049

1. 代理请求：使用Vue CLI提供的配置proxy代理功能，将跨域请求转发到后端API。3. JSONP请求：如果后端API支持JSONP，你可以使用Vue Resource或Axios等库发送JSONP请求。2. CORS头部设置：在后端API的响应中设置CORS头部，允许前端Vue应用的域名访问后端API。你可以根据自己的需求和后端API的要求选择适合的方法。这样，在你的Vue组件中，可以直接使用`/api`作为请求路径，而不需要担心跨域问题。这样，前端Vue应用就可以跨域访问后端API了。

VueCLI3打包部署与Nginx反向代理解决跨域实战

本文提供了从Vue CLI 3项目打包到部署到Nginx服务器，并解决跨域问题的详细流程，包括配置文件更改、打包过程以及Nginx的反向代理设置。理解并按照这些步骤操作，可以帮助开发者顺利完成Vue应用的部署。