// 在vue.config.js中配置代理 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { host: "localhost", port: 8080, // 端口号 https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 // proxy: 'http://localhost:3000' // 配置跨域处理,只有一个代理 // 配置多个代理 proxy: { "/api": { target: "https://echarts.apache.org/examples",// 要访问的接口域名 ws: true,// 是否启用websockets changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { '^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可 } } } } }) //前端可以这样 this.$http .get("/api/data/asset/geo/HK.json", { params: {} }) .then((GeoJSON ) => { console.log(GeoJSON ); this.echarts.registerMap("HK", GeoJSON.data ); }); 提前安装好全局的http-server,才可以使用this.$http.get()
标签:http,跨域,前端,代理,api,true,服务端 From: https://www.cnblogs.com/freeWorlds/p/17912267.html