vue 本地环境API代理设置和解决跨域

写一个config.js文件，作为项目地址的配置。

 1 //项目域名地址
 2 const url = 'https://exaple.com';
 3
 4
 5 let ROOT;
 6 //由于封装的axios请求中，会将ROOT打包进去，为了方便之后不再更改，判断了当前环境，而生成的不同的ROOT
 7 if (process.env.NODE_ENV === 'development') {
 8     //开发环境下的代理地址，解决本地跨域跨域，配置在config目录下的index.js dev.proxyTable中
 9     ROOT = "/apis"
10 } else {
11     //生产环境下的地址
12     ROOT = url;
13 }
14
15 exports.PROXYROOT = url; //代理指向地址
16 exports.ROOT = ROOT;

这里暴露出去了两个接口，一个作为代理指向地址，也就是真正的请求地址，一个则为我们的ajax请求的地址。

我们将ROOT引入我们配置的ajax中，再将proxyConfig.js修改如下：

 1 const config = require("../src/fetch/config");  //路径你们改下
 2 module.exports = {
 3   proxy: {
 4         [config.ROOT]: {    //将www.exaple.com印射为/apis
 5             target: config.PROXYROOT,,  // 接口域名
 6             secure: false,  // 如果是https接口，需要配置这个参数
 7             changeOrigin: true,  //是否跨域
 8             pathRewrite: {
 9                 [`^${config.ROOT}`]: ''   //需要rewrite的
10             }
11         }
12   }
13 }

参考文章

https://segmentfault.com/a/1190000011007043

https://blog.csdn.net/hyupeng1006/article/details/81810545

转载于:https://www.cnblogs.com/1032473245jing/p/9806381.html

vue 本地环境API代理设置和解决跨域相关推荐

webpack开发配置API代理proxy，解决跨域问题
1. 一个完整的webpack配置代理代码设置代理需要: 1.需要使用本地开发插件:webpack-dev-server. 2.webpack-dev-server 使用的是 http-proxy- ...
vue dev环境API代理实现
基本描述如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器.这时候我们就需要使用API代理了. 代码实现 devServer.pr ...
vue服务器代理proxyTable配置解决跨域
目录 1.Proxy代理作用 2 .常见情况 3.应用方式 4.具体配置实例 5.配置思路代理原理总结 1.Proxy代理作用 proxy代理作用:前端服务器代理的作用是,告诉服务器任何未知请求( ...
使用express封装一个简单的http代理服务器以及手动设置Access-Control-Allow-Origin解决跨域问题
一.跨域是什么? 先来了解一下什么是跨域,才能知道如何解决跨域问题. 跨域:出于浏览器的同源策略限制,使浏览器不能执行其他网站的脚本.同源策略是浏览器对 javascript 施加的安全限制. 所谓同 ...
微服务电商实战(十一)搭建vue项目对接注册登陆接口，解决跨域问题，使用七牛云实现头像上传
一.简介 node.js版本:v12.16.3 node.js下载 vue官网教程 iview介绍上传头像接口,图片存储在七牛云中,注册并实名认证之后可以免费使用以下会描述使用vue搭建项目框架的 ...
vue+Java后端进行调试时如何解决跨域问题
今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的 ...
nodeJS 反向代理请求，解决跨域。
var express = require('express') const { createProxyMiddleware } = require('http-proxy-middleware') ...
本地调试H5，如何设置接口的请求代理proxy，解决跨域问题（共2步）。
第1步:在http目录的index.js中设置baseUrl的值为/api // http/index.js (该项目使用的是luch-request插件,封装请求处理) ... http.setCo ...
通过 Nginx 代理转发配置实现跨域（API 代理转发）
通过 Nginx 代理转发配置实现跨域(API 代理转发) 阅读 2285 收藏 119 2017-04-08 原文链接:www.thinktxt.com 1元视频体验视频通话10000分钟cloud ...

vue 本地环境API代理设置和解决跨域

vue 本地环境API代理设置和解决跨域相关推荐

最新文章

热门文章