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

最新推荐文章于 2024-08-11 13:18:04 发布
最新推荐文章于 2024-08-11 13:18:04 发布
阅读量4.8k 收藏 15
点赞数 8
分类专栏： web 文章标签： vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
  1. 其中常见的跨域处理：
devServer: {
   
   proxy: {
   
     '^/proxy': {
   
       target: 'http://127.0.0.1:8100',
       changeOrigin: true
最低0.47元/天 解锁文章
小杨小杨神采飞扬
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
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 2445
问题 这几天在把项目弄好，打包完成后发现之前cli配置的拦截器没有在打包后没起到作用，使用别的方法通过nginx反向代理进行配置跨域。 解决方案 在nginx里面的nginx.config里面配置 配置如下 server { listen 80;#监听端口 server_name localhost;#代理服务地址 add_header Access-Control-Allow-Origin *; location / {
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上
最新发布
朱豪凯的博客
08-11 1107
介绍vue3中怎么打包，并部署到Nginx服务器上
vue项目上线打包及跨域问题
zhouzhou69的博客
10-23 4277
到时上线了，前端项目是以静态资源的形式放在nginx下，有nginx代理转发请求；因此前端写的请求地址写成nginx所在的地址，前端静态资源地址（nginx所在的地址）-->请求地址写nginx所在地址===看起来是同一个地址，因此不会存在跨域注：请求地址虽然写的是nginx所在地址，但nginx会做转发代理到真实后端接口。
Vue打包上线后的跨域问题处理
qq_39805327的博客
06-14 729
由于开发环境和生产环境的不同，会导致vue访问出现跨域的问题。
vue项目打包部署跨域解决方案
呐喊的专栏
05-11 6037
跨源资源共享（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应用就能顺利地在服务器的任何子...
最全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 1208
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 4439
静态资源路径应该是http开头，访问的时候变成了https开头，导致找不到资源，后来发现是这句话搞得鬼。 <meta http-equiv=“Content-Security-Policy” content=“upgrade-insecure-requests”> 这个代码的作用是将站内加载的资源自动将http转为https 如果不需要去掉就可以解决问题 ...
Vue项目部署后Http变成了https
weixin_44362321的博客
03-03 1808
在index.html里面存在这个配置去掉就好了
vue项目从http到https需要做什么ajax修改
jun999
07-08 2557
项目从http迁移到https，请求接口仅需使用相对路径（省略协议名称），在请求时会根据当前页面的协议名称做自动添加。 http://www.baidu.com/api/subject/get 只需配置成 //www.baidu.com/api/subject/get ，即会通过当前页面协议名称做自动匹配添加。 如果https的网站中有http协议的资源，发送请求使用相对路径，session是会根据当前协议自动匹配一致。(https页面下的“相对路径”表示的请求都会与页面的协议保持一致) 参考.
vue+express前后端项目一起配置成https请求
柳宁依的博客
08-16 2176
1、首先到阿里云服务器上面申请证书，申请完成以后下载下来（nginx服务版本的），解压出来两个文件，文件后缀是.key和.pem，最好把这两个文件名改成自己的域名。具体申请证书的步骤自行百度。 2、将vue项目里面的config文件夹下面的prod.env.js文件中加上一句：BASE_URL:'"https://xxx.xxx.xx.xxx"'，xxx.xxx.xx.xxx是自己服务器的ip，...
VUE部署nginx解决跨域问题
qq_35220073的博客
04-08 1万+
VUE部署nginx解决跨域问题Vue的代理跨域问题，需要确定的是在开发阶段可以使用，部署到服务器后出现请求失败的问题(404),如下图。VUE配置的代理 Vue的代理跨域问题，需要确定的是在开发阶段可以使用，部署到服务器后出现请求失败的问题(404),如下图。 这是因为VUE在打包的过程中并没有把代理配置也进行打包，需要配置跨域代理，这里我使用的是服务器是nginx代理实现跨域问题。 先去百度上下载一个nginx，然后进入conf目录，打开nginx.txt配置文件， 找到如下配置 VUE配置的代理 d
解决vue项目中前后端交互的跨域问题、nginx代理配置
upStar1的博客
07-28 4380
解决vue项目中前后端交互的跨域问题、nginx代理配置
vue打包使用nginx代理解决跨域问题
05-01
在前端开发中，经常遇到跨域问题，特别是在使用vue进行打包后部署到生产环境时，很容易出现跨域问题。而要解决这个问题，可以使用nginx代理来解决。 首先，我们需要安装nginx，安装完成后，可以进入nginx的配置文件，一般路径为/etc/nginx/nginx.conf，然后在http模块中加入如下配置： ``` http { server { listen 80; server_name your.api.com; //这里填写你的API地址 location / { proxy_pass http://www.your.api.com; //这里填写你的API地址 add_header Access-Control-Allow-Origin *; //允许跨域请求 } } } ``` 修改完配置文件后，可以使用nginx命令重启nginx生效。配置完成后，我们就可以使用vue-cli中的axios进行跨域请求，在请求头部分加上 ``` proxy: '/yourapi' //这里填写你的请求API地址 ``` 即可完成请求代理。这样，通过nginx代理，我们就可以解决vue打包后的跨域问题了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值