配置

注意:修改之后要重新运行一遍项目才行

devServer:{
contentBase:'./',
proxy:{
// 当你请求是以/api开头的时候,则我帮你代理访问到http://localhost:3000
// 例如:
// /api/users http://localhost:3000/api/users
// 我们真是服务器接口是没有/api的
"/api":{
target:"http://localhost:3000",
pathRewrite:{"^/api":""}
}
}
}
用代理, 首先你得有一个标识, 告诉他你这个连接要用代理. 不然的话, 可能你的 html, css, js这些静态资源都跑去代理. 所以我们只要接口用代理, 静态文件用本地.

‘/api’: {}, 就是告诉node, 我接口只要是’/api’开头的才用代理.所以你的接口就要这么写 /api/xx/xx. 最后代理的路径就是 http://xxx.xx.com/api/xx/xx.

可是不对啊, 我正确的接口路径里面没有/api啊. 所以就需要 pathRewrite,用”^/api”:”, 把’/api’去掉, 这样既能有正确标识, 又能在请求接口的时候去掉api.

devServer之proxy跨域的更多相关文章

  1. 前端本地proxy跨域代理配置

    等了好久的接口,总算拿到了,结果却发现用本地localhost:9712去请求接口的时候,出现了跨域错误,而这个时候我们就需要进行下跨域配置了. 首先,找到项目中名为webpack.config.js ...

  2. proxy跨域

    跨域 浏览器访问非同源的网址时,会被限制访问,出现跨域问题. 解决方案: 1.response 添加 header(CORS) 2.JSONP 方式 3.全局对象+iframe (1)document ...

  3. proxy 跨域配置, 针对有axios的baseURL

    1.首先主要的config文件下的index.js中的proxytable配置 proxyTable:{ '/proxy': { target:'http://192.168.2.141:8080', ...

  4. 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

  5. 跨域解决方案 - webpack devServer

    1. 定义 如果一个项目中配置了webpack, 那么我们使用 webpack devServer 来配置代理转发请求来达到解决跨域问题的目的 webpack devServer 能够解决跨域问题的根 ...

  6. Webpack devServer中的 proxy 实现跨域

    Webpack dev server使用http-proxy解决跨域问题 文档资料 webpack关于webpack-dev-server开启proxy的官方介绍Vue-cli proxyTable ...

  7. Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试

    Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试 会撸码的小马 关注 2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2 接到上一章, ...

  8. proxy解决跨域问题

    首先我们在本地开发,域名都是localhost,当我们需要请求后台数据时,就会出现跨域的问题 下面就是在vue.config.js配置文件里: devServer: {     proxy: {    ...

  9. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

随机推荐

  1. Resource Model

    API不应该直接返回Entity,应该是返回一个Resource,不想把entity内部的细节暴漏给外部 viewModel是在MVC中的叫法 使用AutoMapper来对Entity和Resourc ...

  2. QT 获取字体大小

    QFont font(androidFont); QFontInfo fInfo(font); qDebug()<<"FFFFFFFFFFFFFFFFFFFFFFFPPPSIZE ...

  3. java实现spark常用算子之SortByKey

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  4. MySQL学习笔记:count(1)、count(*)、count(字段)的区别

    关于数据库中行数统计,无论是MySQL还是Oracle,都有一个函数可以使用,那就是COUNT. 但是,就是这个常用的COUNT函数,却暗藏着很多玄机,尤其是在面试的时候,一不小心就会被虐.不信的话请 ...

  5. 转:idea类名出现了不同的颜色

    转:https://blog.csdn.net/yf_mood/article/details/88191818 在安装了git以后发现idea类名出现了不同的颜色,如下: 它们分别表示的含义: 绿色 ...

  6. 使用flex布局解决百分比高度元素垂直居中

    方法一: align-self(解决父元素下面单个子元素布局方式) 父级加上 div{display:flex} 子元素 span { flex-grow: 1; align-self: center ...

  7. JavaWeb【八、JSP指令与动作元素】

    include指令(页面嵌套) <%@ include file="URL"%> include动作 <jsp:include page="URL&qu ...

  8. MyBatis 报错org.apache.ibatis.session.defaults.DefaultSqlSessionFactory.openSessionFromDataSource

    报错如下: org.apache.ibatis.exceptions.PersistenceException: ### Error opening session. Cause: java.lang ...

  9. 牛客小白月赛12 H 华华和月月种树 (离线dfs序+线段树)

    链接:https://ac.nowcoder.com/acm/contest/392/H 来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 131072K,其他语言2621 ...

  10. 【安徽集训】Entropy

    出题人罗哲正是神爷 Orz Description 这是一道披着交互题外衣的通信题,只支持 C++. 你需要实现 \(2\) 个函数. 交互库先给第一个函数传入一个参数 \(n\),你加密得到的 \( ...