vue-cli打包到线上怎么进行跨域设置

最新推荐文章于 2025-10-13 11:25:58 发布
原创 最新推荐文章于 2025-10-13 11:25:58 发布 · 7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#打包跨域 #vue

本文介绍了解决Vue项目中跨域问题的方法，包括服务器端配置CORS、使用nginx进行反向代理及修改线上地址等方案。推荐使用nginx配置反向代理，以在前端层面彻底解决跨域问题。

vue 在开发环境，涉及跨域，就在本地配置了代理，但是部署到服务器上，就不行了。

解决方法有一下几种

  • 服务器端配置CORS
  • 用nginx反向代理,和访问本地服务器是一样的
  • 可以修改成正式线上的地址，再build
推荐

使用nginx配置反向代理，这样就可以在前端彻底解决跨域问题。

Vue打包部署中的跨域问题解决方案
CyberGenius的博客
09-23 855
在Vue项目开发过程中，有时我们需要与不同域名的后端API进行通信，这就涉及到了跨域的问题。本文将详细介绍如何在Vue项目中处理跨域请求，并提供相应的源代码示例。代理配置是最常用的方法，它能够将API请求转发到后端服务器上，避免了浏览器的同源策略限制。如果你有权限修改后端API的代码，那么你可以通过设置CORS（Cross-Origin Resource Sharing，跨域资源共享）来解决跨域问题。Vue提供了一个简单易用的代理配置，可以通过该配置将API请求转发到后端服务器上，从而避免跨域问题。
vue打包完后Nginx代理(解决vue打包后跨域问题)
a13706935773的专栏
04-20 3万+
vue index.js文件源码'use strict'// Template version: 1.2.7// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.exports = { dev: { // Paths assetsSubD...
前端-Vuex
最新发布
weixin_52159554的博客
10-13 843
Vuex是Vue的状态管理工具，用于管理多组件共享数据。核心概念包括State（状态数据）、Mutations（同步修改）、Actions（异步操作）、Getters（派生状态）和Modules（模块拆分）。State提供公共数据源，Mutations确保状态变更可追踪，Actions处理异步逻辑，Getters派生新状态。Modules用于组织复杂状态树，可通过命名空间隔离模块状态。Vuex通过响应式机制和辅助函数（mapState等）简化操作，实现数据集中管理，适用于用户信息、购物车等共享数据场景。
如何部署vue前端项目到服务器上（nginx处理跨域）
热门推荐
sherry_chan的博客
01-14 6万+
注： 本文选择了nginx做web服务器。 因为在本文vue前端项目中，需要从接口获取数据，可是数据与vue前端项目是在同一ip地址但不同端口号，所以需要跨域读取数据。本文的跨域处理是使用了nginx。 环境： 阿里云服务器（ubuntu 64bit） xshellnginx 1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下） cd /etc
vue项目打包上线后接口地址报错问题
imkxrc的博客
06-11 2万+
 代理设置的作用是你要访问后端的请求直接发到当前站点，因此你的 api 路径都应该是不含 hostname 的相对路径部署到生产环境时，只要相对路径保持不变，就不需要任何设置。如果开发环境下的 api 路径和生产环境的路径不一致，那么一定可以通过设置 proxyTable 使之一致。因此，结论是，只要 proxyTable 设置得好，部署上线不需要做任何改动。...
解决跨域问题！Nginx代理与Vue-cli代理处理跨域问题
黄政的博客
04-18 3362
解决跨域问题！Nginx代理与Vue-cli代理处理跨域问题前言业务场景两种跨域解决方法解决原理Ngnix代理vue-cli写在最后 前言 我是一个java后端程序员，之前解决跨域都是在后端写一个过滤器，给HttpRequest的header添加都头信息。但是入职公司后线上服务器是通过配置nginx代理来解决跨域的，所以我再写个过滤器是多余。 现在都是前后端分离，为了更好的接口测试，让前端项目在我...
利用http-server测试vue-cli打包后的项目
qq_33718889的博客
03-22 1408
  目前在学习Vue，利用vue-cli脚手架开发的项目，在生产环境中(npm run dev)一切良好，根据官方的npm run build打包后发现，在自己没有线上服务器的情况下，测试成为一大难题。 1. 打包测试（搭建服务器）   打包后的代码必须放在服务器下才能运行，直接双击index.html是不行的。   下面介绍一种利用node.js的 http-server搭建一个简单的http服...
vue+vue-cli2+webpack配置资源cdn
weixin_30239339的博客
08-19 670
vue-cli2+webpack构建的vue项目如何让图片和js等静态资源走cdn，哪里可以配置呢？下面我详细介绍 1.config/index.js中可以看到 module.exports = { dev: {...}, build: { assetsSubDirectory: 'static', assetsPublicPath: '/',...
vue-cli2.x统一配置接口请求地址和开发环境的跨域代理
winne雪
07-22 3136
1、修改config/dev.env.js（开发环境的baseURL地址统一配置） 2、修改config/prod.env.js（线上环境的baseURL地址统一配置） 3、修改config/index.js，配置开发环境的跨域代理url 4、自己封装axios请求js文件（request.js） 5、自己封装url地址js文件（apiUrl.js） 本来完整的后台接口地址api： https:...
vue-cli如何解决跨域？
郝峰vip的博客
12-11 991
写在前面 小编在开发过程中从原生的jq+css写代码，到vue-cli脚手架搭建项目，都遇到了跨域问题，之前解决跨域问题一般都是后台加请求头，前端用jsonp的话只适用于get请求，也是很少用，自从node.js npm 模块的出现，也就出现了前端使用代理解决跨域使用http-proxy-middleware 代理解决，下边说一下具体的解决办法。 使用http-proxy-middleware ...
vue项目中解决跨域问题（打包上线无需手动切换url）
qq_35052338的博客
08-02 9878
1、在目录config下的index.js中设置代理； proxyTable: { //设置代理 '/api': { //使用"/api"来代替跨域地址139.xxx.xx target: 'http://139.xxx.xx', //源地址 changeOrigin: true, //改变源 pathRewrite: { //路径重写 '^/api': 'http://139.xxx...
Vue-cli3 解决跨域问题
evalsys的博客
11-23 1万+
devServer.proxy Type: string | Object 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。 devServer.proxy 可以是一个指向开发环境 API 服务器的字符串： mo...
vue-cli项目解决开发环境和线上环境的跨域配置问题
一键写代码的博客
06-13 3436
前端axios请求api跨域接口 解决办法： npm start 本地开发环境解决： 在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true, proxyTable: { '/api':{ target:'http://xx.xx.xx.xx:5568', changeO...
vue-cli跨域使用代理
天空影
08-17 1838
这个方法是面向vue-cli的，所以在使用之前请先初始化好vue-cli工程 下载中间件 npm install -S http-proxy-middleware 配置代理 config/index.js // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/': { t...
vue-cli3.0 axios跨域请求代理配置及端口修改
Stavin Li的博客
10-19 2万+
1.安装 axios vue add axios 2.项目根目录下新建 vue.config.js // vue.config.js module.exports = { devServer: { port: 端口号, proxy: { '/apis': { target: 'https://mov...
vuecli3打包后出现跨域问题，前端配置拦截器无效
qq_45626867的博客
09-01 2532
问题 这几天在把项目弄好，打包完成后发现之前cli配置的拦截器没有在打包后没起到作用，使用别的方法通过nginx反向代理进行配置跨域。 解决方案 在nginx里面的nginx.config里面配置 配置如下 server { listen 80;#监听端口 server_name localhost;#代理服务地址 add_header Access-Control-Allow-Origin *; location / {
vue-cli 3.0 配置跨域
ASIA_技术
04-11 1147
配置文件为：vue.config.js与package.json，如果没有该文件可以自行创建 方案一：只给proxy配置成字符串，验证可用，没有特别的使用，vue module.exports = { devServer: { proxy: 'http://1.1.1.1:8000' } } 方案二：只给proxy配置成object，还没有使用成功 mo...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值