关于vue中webpack配置跨域方法

最新推荐文章于 2025-02-12 15:13:03 发布
原创 最新推荐文章于 2025-02-12 15:13:03 发布 · 611 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍如何在vue.config.js中设置代理，实现不同环境下的HTTP请求管理，避免404错误。通过axios封装，根据环境变量替换API前缀，确保正确调用目标服务器。同时，讲解了跨域配置与静态资源代理的注意事项。

在vue.config.js中，利用proxy去进行配置在这里插入图片描述
并且可以根据http请求接口不同去配置多种代理，需要注意的是，在封装的axios请求中，http要根据环境去replace掉前面的api，避免请求出现404的情况，target为目标代理服务器地址，changeOrigin：true为允许跨域，pathRewrite为代理，但是你得告诉它以什么开头才走代理，不然可能像html,css,js这些静态资源都可能跑去代理，由于你请求的接口没有/api ,所以你要把他制空

vue项目中怎样在webpack中的config配置代理解决跨域问题
丁哒哒的博客
03-26 8166
前言： 本项目是vue得项目，启动在8080端口，后台是自己用nodejs开的服务器,启动的是3000端口，在请求接口的时候就遇到了跨域问题，简单记录一下。 我的后台接口是酱紫写的(随便写的)： 我的http请求中url是直接写的 /api/post 和 /api/get 下面进入正题 找到config里的index.js文件，其中有一个proxyTable，就是用来配置代理服务...
Vue如何处理浏览器跨域问题
sungencheng的博客
02-09 5553
跨域问题是由于浏览器的同源策略（Same-Origin Policy）所导致的，同源策略是浏览器的一种安全机制，也就是浏览器向不同源（不用协议、不用域名、不同端口）发送ajax请求会失败。
vue webpack配置跨域
weixin_39418338的博客
08-20 1096
一般不是同源策略都需要跨域，本人用的是webpack配置代理跨域，下面配置过程： 首先，找到config下 的index.js 然后 index.js打开，找到proxyTable进行配置 下面是我配置要访问的服务器地址，都附有解释 在请求数据组件修改请求数据地址路劲，因为http://39.97.33.178被/miao代替，所以好比我要访问 http://39.97.33.17...
Vue Webpack 跨域问题
m0_51105610的博客
05-08 704
一、官网 webpack 二、项目中vue.config.js文件 //代理跨域 devServer:{ proxy: { "/api": { target: "http://localhost:3000", pathRewrite: {"^/api" : ""} } } } 以上仅用记录学习
vue跨域/webpack跨域
weixin_41924621的博客
01-20 687
vue中的代理proxy 1.解决的问题： 前后端分离而产生的本地开发跨域问题 2.原理： 服务器端之间不存在跨域，利用了node代理，将域名发给本地服务器，再由本地服务器请求目的服务器 3.不同版本配置文件的区别 新版本的vue跨域在vue.config.js文件（需要手动创建）配置 旧版本的在build文件夹下面的webpack.dev.conf.js文件（自动创建）配置 4.配置 配置的是devServer（本地服务器配置）下面的proxy(代理)属性 有些博客会写proxyTable是因为写在其他文
解决vue+webpack项目接口跨域出现的问题
10-14
解决跨域的一种常见方法是在Webpack的配置中使用`proxyTable`。在Vue项目的`config/index.js`文件中，我们可以找到`proxyTable`配置项。在这里，我们可以设置一个代理，将本地的请求转发到目标API服务器。以下是一个...
精选资源
Vue中跨域及打包部署到nginx跨域设置方法
01-19
众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问...以vue-cli搭建的项目为例, 在webpack配置文件 /config/index.js, 由
详解vue-cli脚手架中webpack配置方法
10-18
下面将详细介绍 Vue CLI 脚手架中的 Webpack 配置方法。 Webpack 的核心概念包括 Entry（入口）、Output（输出）、Loaders（加载器）和 Plugins（插件）。在 Vue CLI 中，这些配置主要分布在 `webpack.base.conf.js...
vue-cli webpack 开发环境跨域详解
08-30
以下是关于Vue CLI和Webpack在开发环境中的跨域详解。 首先，理解什么是跨域。跨域是指由于同源策略，浏览器限制了来自不同源的"文档"或脚本尝试获取资源，这里的"源"由协议、域名和端口共同决定。在开发过程中，...
Vue webpack配置跨域的基本配置和问题的注意
埃尔斯的博客
11-20 445
开发十年，就只剩下这套架构体系了！ >>> ...
vue----webpack----跨域问题,3种解决方法
weixin_33918114的博客
03-08 404
1.为什么会跨域: 因为浏览器同源策略的限制，不是同源的脚本不能操作其他源下面的对象。 2.什么是同源策略: 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 简单的来说:协议、IP、端口三者都相同，则...
vue webpack配置解决跨域问题
weixin_34050427的博客
10-01 724
现在基本项目都是实行前后端分离的原则，不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目，在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 http.js post (url, data) { return axios({ method: 'post', baseURL: '/api', ...
vue开发06：前端通过webpack配置代理处理跨域问题
m0_67412019的博客
02-12 1129
在浏览器尝试请求不同源（域名、协议、端口号不同）的资源时，浏览器的同源策略会阻止这种跨域请求。（比如前端端口15500，后端端口5050，前端界面不可以直接调用5050端口）
vue 跨域
佳人与北的博客
10-23 870
跨域是浏览器为了安全而做出的限制策略 浏览器请求必须遵循同源策略：同协议、同域名、同端口 三大解决跨域方法 CORS跨域：服务端设置，前端直接调用，后台允许前端某个站点进行访问 1.引入axios npm i axios --save-dev 2.请求 import axios from 'axios' axios.get(url).then( res => { console.log(res) }) JSONP跨域：前端适配，后台配合，前后台同时改造 jso..
Vue专题（五）基于webpack的Vue项目配置代理解决跨域问题
XueZePeng18729875380的博客
03-15 1775
基于webpack创建的vue项目，自身会有config的配置文件。当请求后台接口，出现跨域报错时。
vue中webpack中跨域请求proxyTable代理的配置
人间草木
02-15 1530
在vue项目的 config/ 文件夹下的 index.js 文件里的dev ，写入如下代码 方便你复制~~~~ // 配置proxy跨域请求代理 proxyTable: { // url中匹配到 '/api' 就会吧url中 '/api' 之前的东西全部替换为下面target中的东西 '/api': { target: 'ht...
vue项目开发，用webpack配置解决跨域问题
weixin_45866907的博客
07-01 103
vue项目开发，用webpack配置解决跨域问题
vue webpack 跨域代理
weixin_30722589的博客
05-31 108
dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://10.69.205.36:8000...
vue2 webpack双域名跨域问题
最新发布
07-08
### 配置 Webpack 解决 Vue2 双域名跨域问题 在 Vue 2 项目中，如果前端应用部署在 `http://a.example.com`，而后端服务位于 `http://b.example.com`，则会遇到浏览器的同源策略限制。为了在开发环境中解决这一问题，可以通过配置 Webpack 的 `devServer.proxy` 来实现请求代理，从而绕过跨域限制[^1]。 #### 开发环境下的代理配置 Vue CLI 使用 `webpack-dev-server` 提供本地开发服务器，并支持通过 `proxy` 设置将特定路径的请求代理到目标服务器。这种机制使得前端在开发过程中可以像访问本地资源一样访问远程服务，而不会受到同源策略的影响[^3]。 以下是一个典型的 `vue.config.js` 配置示例： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://b.example.com', // 要代理的目标服务器地址 changeOrigin: true, // 是否更改请求头中的 origin 字段为目标服务器地址 pathRewrite: { '^/api': '' // 请求路径重写，去掉前缀 } }, '/auth': { target: 'http://another.example.com', // 第二个目标服务器 changeOrigin: true, pathRewrite: { '^/auth': '' } } } } } ``` 上述配置表示： - 所有以 `/api` 开头的请求都会被代理到 `http://b.example.com`。 - 所有以 `/auth` 开头的请求会被代理到 `http://another.example.com`。 这样即使后端 API 分布在不同的域名下，也可以通过多个代理规则来处理，确保开发阶段能够顺利进行测试和调试[^2]。 #### 前端代码中的使用方式 在 Vue 应用中调用接口时，只需按照代理路径发起请求即可，例如： ```javascript import axios from 'axios' // 请求 http://b.example.com/user/profile axios.get('/api/user/profile').then(response => { console.log(response.data) }) // 请求 http://another.example.com/login axios.get('/auth/login').then(response => { console.log(response.data) }) ``` 由于代理是在开发服务器上完成的，因此浏览器看到的请求来源仍然是 `localhost:8080`（默认端口），从而避免了跨域问题。 #### 生产环境建议方案 虽然 `devServer.proxy` 在开发阶段非常有用，但它仅适用于本地开发环境，在生产部署中无法直接使用。对于生产环境，推荐采用以下几种方式之一来解决跨域问题： 1. **Nginx 反向代理** 将所有后端请求通过 Nginx 统一代理到对应的后端服务，使得前端页面与后端接口看起来“同源”。这种方式不仅解决了跨域问题，还能提高性能并增强安全性。 2. **CORS 配置** 后端服务应在响应头中添加适当的 CORS 相关字段，如 `Access-Control-Allow-Origin`、`Access-Control-Allow-Credentials` 等，以允许来自指定域名的跨域请求。 3. **JSONP（仅限 GET 请求）** JSONP 是一种传统的跨域解决方案，利用 `<script>` 标签不受同源策略限制的特点来获取数据。不过该方法只适用于 GET 请求，并且存在一定的安全风险，不建议用于敏感操作。 #### 携带 Cookie 的跨域请求注意事项 如果需要在跨域请求中携带 Cookie，则必须同时满足以下条件： - 后端响应头中包含 `Access-Control-Allow-Credentials: true`。 - 前端请求设置 `withCredentials: true`。 例如，在 Axios 中可如下配置： ```javascript axios.get('/api/user/profile', { withCredentials: true }) ``` 此外，`Access-Control-Allow-Origin` 不能设置为通配符 `*`，而应明确指定允许访问的源地址。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值