vue中配置proxy代理
如果你的前端应用和后端 API 服务器没有运行在同一个主机上（即解决跨域问题，用proxy代理请求一下），你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。
将
转发到
app.vue文件
<template><div id="app"><h1>hello Vue cli</h1><HelloWorld></HelloWorld></div></template><script>/* @ => src */// import HelloWorld from "./components/HelloWorld.vue";import HelloWorld from "@/components/HelloWorld.vue";/* 1. 引入 axios 请求库 */import axios from "axios";/* 组件的配置项 */export default {created() {// axios// .get("song/url?id=504835560")// .then((res) => {//console.log(res);// });axios.get("/song/url?id=504835560").then((res) => {console.log(res);});axios.get("/api/s/getHotProducts").then(res=>{console.log(res);})},name: "App",components: {HelloWorld},};</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>
在 vue.config.js 文件中添加如下所示的配置项
module.exports = {lintOnSave: false,devServer: {proxy: "/"}};
如果请求有多个不同的地址
A: /api/s/getHotProducts
B: /song/url?id=504835560
module.exports = {lintOnSave: false,// devServer: {//proxy: "/"// }devServer: {proxy: {"/song": {target: "/",// changeOrigin: true,},"/api": {target: "/",},},},};
如果觉得《vue中配置proxy代理》对你有帮助，请点赞、收藏，并留下你的观点哦！
