const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ devServer: { proxy: { '/api': { target: 'http://api.example.com:90',//代理的接口地址 changeOrigin: true,//允许跨域/api/v1/login/register_expert pathRewrite: { '^/api': '' } } } }, transpileDependencies: true })

时间: 2024-04-11 11:32:14 浏览: 174

vue cli3 配置proxy代理无效的解决

在Vue CLI 3中，开发过程中常常需要配置代理来解决跨域问题，使得前端应用能够与后端API接口进行通信。然而，有时按照常规方法配置`proxy`后，可能会遇到代理无效的情况。本文将详细解释如何正确配置Vue CLI 3的`proxy`代理，并解决配置无效的问题。打开`vue.config.js`文件，这个文件是Vue CLI 3自动生成的配置文件，用于定义项目的特定设置。如果没有这个文件，可以在项目根目录下创建一个。在`vue.config.js`中，我们需要关注`devServer`对象，它包含了开发服务器的相关配置。`proxy`属性用于设置代理，将前端的HTTP请求转发到指定的后端服务器。例如，以下是一个基本的配置示例： ```javascript module.exports = { devServer: { proxy: "http://127.0.0.1:8081", port: 8085 } }; ``` 在这个例子中，所有向`/api/*`的请求（默认情况下）都将被代理到`http://127.0.0.1:8081`，而前端应用则运行在`localhost:8085`上。请注意，这里的关键是不要添加额外的配置选项，如`changeOrigin`或`pathRewrite`，除非你有特定的需求。如果这些选项已经导致了问题，尝试去掉它们，保持配置尽可能简洁。如果你的API请求没有被正确代理，可能的原因有： 1. **配置错误**：确保`proxy`的值是正确的后端服务器地址，包括协议（http或https）、主机名和端口。 2. **请求路径不匹配**：默认情况下，Vue CLI 3会将所有非静态资源的请求代理出去。如果你的请求URL需要特殊处理，可以使用`path`属性来指定。例如，如果你的API请求路径是`/my/api/*`，可以这样配置： ```javascript module.exports = { devServer: { proxy: { '/my/api': { target: 'http://127.0.0.1:8081' } }, port: 8085 } }; ``` 3. **端口冲突**：确保你的前端服务器端口（`port`）与后端服务器端口不同，以防止端口占用问题。 4. **跨域限制**：虽然`proxy`可以解决开发环境中的跨域问题，但实际生产环境中，你需要在后端设置CORS（Cross-Origin Resource Sharing）策略。在axios库中发送请求时，不需要为URL添加前缀，如`/api`，因为`proxy`会自动处理。例如： ```javascript import axios from 'axios'; axios.get('/users') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 另外，如果你在`vue.config.js`中还看到了`configureWebpack`的配置，这部分通常用于添加webpack插件，比如`ProvidePlugin`，它可以全局注入依赖，例如jQuery。这段代码表示在所有模块中都可以直接使用`$`, `jQuery`和`window.jQuery`： ```javascript const webpack = require('webpack'); module.exports = { // ... configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ] } }; ``` 当遇到Vue CLI 3的`proxy`代理无效时，首先要检查配置是否正确，然后排查端口、请求路径和跨域设置。如果仍然无法解决问题，可能需要查看浏览器的开发者工具网络面板，检查请求是否被正确发送以及返回的响应。通过这种方式，你可以更深入地了解问题所在，并找到解决办法。

你的`vue.config.js`文件中的配置看起来是正确的。这个配置会将以`/api`开头的请求代理到`http://api.example.com:90`这个目标地址，并允许跨域请求。同时，通过`pathRewrite`选项，将请求路径中的`/api`前缀重写为空字符串，以适应目标接口的路径。这样配置后，你可以在前端代码中使用`/api`前缀来代替实际请求的域名部分。例如，原本的请求地址为`http://api.example.com:90/some/api`，现在可以改为`/api/some/api`。请确保你已经正确安装了`@vue/cli-service`模块，并且重新启动了Vue项目，以使配置生效。如果一切正常，你应该能够成功进行跨域请求。如果你仍然遇到问题，请提供更多的错误信息和细节，以便更好地帮助你解决问题。

阅读全文

相关推荐

vue-cle3项目运行报错sockjs-node-info解决方案.docx

vue-socket.io跨域问题有效解决方法

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true }) module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } };

vue/cli-service vue2.6 配置代理

'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', OPEN_PROXY: false // 是否开启代理, 重置后需重启vue-cli })

vue的devServer的proxy的地址如何导出

AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:158:14)

vue项目连接rtsp://admin:aa123456@111.31.237.82:1558/Streaming/Channels/201报跨域如何解决

axios.get('http://www.baidu.com') 出现跨域怎么办

cli-service 添加响应头

vue3项目vue.config.js配置

public/config.js配置后端路径，在request.js和vue.config.js怎么调用

vue blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.

最新推荐

【超强组合】基于VMD-星雀优化算法NOA-Transformer-BiLSTM的光伏预测算研究Matlab实现.rar

探索数据转换实验平台在设备装置中的应用

管理建模和仿真的文件

ggflags包的国际化问题：多语言标签处理与显示的权威指南

如何使用MATLAB实现电力系统潮流计算中的节点导纳矩阵构建和阻抗矩阵转换，并解释这两种矩阵在潮流计算中的作用和差异？

使用git-log-to-tikz.py将Git日志转换为TIKZ图形

"互动学习：行动中的多样性与论文攻读经历"

ggflags包的定制化主题与调色板：个性化数据可视化打造秘籍

如何使用Matlab进行风电场风速模拟，并结合Weibull分布和智能优化算法预测风速？

小栗子源码2.9.3版本发布