webpack开发跨域问题解决办法

本文介绍了webpack开发跨域问题解决办法，分享给大家，具体如下：

1. 说明

webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题

2. API

需要代理的 pathname 要加 /

module.exports = {
  devtool: 'cheap-module-source-map',
  entry: './app/js/index.js'
  output: {
    path: path.resolve(__dirname, 'dev'),
    // 所有输出文件的目标路径
    filename: 'js/bundle.js',
    publicPath: '/',
    chunkFilename: '[name].chunk.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dev'),
    publicPath: '/',
    historyApiFallback: true,
    proxy: {
      // 请求到 '/device' 下 的请求都会被代理到 target： http://debug.xxx.com 中
      '/device/*': {
        target: 'http://debug.xxx.com',
        secure: false, // 接受 运行在 https 上的服务
        changeOrigin: true
      }
    }
  }
}

3. 使用

注：使用的url 必须以/开始 否则不会代理到指定地址

  fetch('/device/space').then(res => {
    // 被代理到 http://debug.xxx.com/device/space
    return res.json();
  }).then(res => {
    console.log(res);
  })

  fetch('device/space').then(res => {
    // http://localhost:8080/device/space 访问本地服务
    return res.json();
  }).then(res => {
    console.log(res);
  })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli webpack 开发环境跨域详解

    edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying 为了解决跨域问题, 通常会使用Jsonp,但是jsonp只能是get请求. 或者使用CORS支持,设置Access-Control-Allow-Origin: * 0 前置技能 熟悉vue-loader 和 webpack  1 基本配置 编辑confix/index.js文件 dev

  • webpack开发跨域问题解决办法

    本文介绍了webpack开发跨域问题解决办法,分享给大家,具体如下: 1. 说明 webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题 2. API 需要代理的 pathname 要加 / module.exports = { devtool: 'cheap-module-source-map', entry: './app/js/index.js' output: { path: path.resolve(__dirname, 'dev'),

  • 前端面试必会网络跨域问题解决方法

    前端面试必会网络跨域问题解决方法

    目录 什么是跨域 跨域解决方法1-代理 跨域解决方法2-JSONP 跨域解决方法3-CORS 概述 简单请求 简单请求的判定 简单请求的交互规范 需要预检的请求 附带身份凭证的请求 一个额外的补充 什么是跨域 浏览器有一个重要的安全策略,称之为「同源策略」 其中,源=协议+主机+端口源=协议+主机+端口源=协议+主机+端口,两个源相同,称之为同源,两个源不同,称之为跨源或跨域 比如: 源 1 源 2 是否同源 www.baidu.com www.baidu.com/news www.baidu.

  • Spring MVC中自带的跨域问题解决方法

    前言 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.本文将详细介绍关于Spring MVC跨域问题解决的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 问题 使用Spring mvc 开发了一个Restful 接口 供前端调用 @PostMapping("/search") public List<Map> search(@RequestBody QueryParams qu

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • java 请求跨域问题解决方法实例详解

    java 请求跨域问题解决方法实例详解 新建Util类,在Util中添加下面方法: /* * response请求跨域公共设置 */ public static HttpServletResponse SetHttpServletResponse( HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(&qu

  • web开发跨域原因的多种解决方案

    web开发跨域原因的多种解决方案

    目录 跨域原因 JSONP Nginx解决 后端解决 跨域原因 是由于浏览器的同源策略限制; 跨域指: 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 JSONP 这种方式并不适用于开发, 可以说是被完全淘汰, 但是由于实现复杂, 面试官对于这种方案的深究非常追崇. 核心思想: 网页通过添加一个<script>标签的src属性,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来. 缺点: 需要后端配合才能完成只能发送

  • 前端跨域问题解决及七大跨域原理详解

    目录 为什么跨域? 跨域的时机? 同域情况 && 跨域情况? 解决跨域的方案 JSONP WebSocket Cors Node接口代理 Nginx postMessage document.domain && iframe 咱们做前端的,平时跟后端对接接口那是必须的事情,但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域,那跨域到底是啥呢?为什么会跨域呢?又怎么才能解决呢? 为什么跨域? 为什么会出现跨域问题呢?那就不得不讲浏览器的同源策略了,它规定了协议号-域

  • vue-admin-template解决登录和跨域问题解决

    vue-admin-template解决登录和跨域问题解决

    目录 一.下载安装项目 二.修改登录访问地址 三.解决跨域问题 一.下载安装项目 git地址:https://github.com/PanJiaChen/vue-admin-template.git 二.修改登录访问地址 找到 .env.develpment文件 # just a flag ENV = 'development' # base api # VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = 'http://localhost:9001

  • Spring boot 和Vue开发中CORS跨域问题解决

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解. 1. 遇到的问题: 我用spring-boot 做Rest服务,Vue做前端框架,用了element-admin-ui这个框架做后台管理.在调试的过程中遇到了如下错误: Preflight response is not

  • Django+vue跨域问题解决的详细步骤

    跨域 由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明 什么是跨域 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景. 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.

随机推荐