美文网首页
webpack代理请求api,解决跨域问题。

webpack代理请求api,解决跨域问题。

作者: hansduo | 来源:发表于2017-12-29 11:07 被阅读0次

前些时间学习react过程中,碰到一个情况。
请求测试环境的api,因为跨域,在跑项目时报错。

最初想法是nginx代理服务器地址和webpack地址,结果因为不清楚的原因(技术深度不够)。这个方法没能生效。

之后就了解到了,webpack可以直接进行代理。将服务器api代理到webpcak同一个ip和端口下。

暂时解决了本地开发的问题。

devServer: {
    contentBase: './src/',
    historyApiFallback: true,
    hot: true,
    port: defaultSettings.port,
    publicPath: defaultSettings.publicPath,
    noInfo: false,
    proxy: {
      '/api': {
        target: 'http://localhost:8085/',
        pathRewrite: {'^/api' : '/seckill'},
        changeOrigin: true
      }
    }
  },

主要是proxy内的设置。

后台api完整地址:http://localhost:8085/seckill/time/now
通过代理设置,在react内请求:http://localhost:8000/api/time/now 即是请求上面的接口。
(webpack端口 8000)
记录以备忘

相关文章

  • webpack代理

    webpack设置代理,用于解决跨域问题一个访问https api前端地址https://api.xtits.cn...

  • webpack代理请求api,解决跨域问题。

    前些时间学习react过程中,碰到一个情况。请求测试环境的api,因为跨域,在跑项目时报错。 最初想法是nginx...

  • Koa代理Http请求

    Koa 代理http请求,解决跨域问题 1、为什么用Koa做跨域代理? "最初为了解决跨域问题,我把站点部署到了n...

  • 配置webpack解决前端跨域

    本地请求服务器接口,报403错误,其实是跨域问题。在webpack中有很方便的方式解决跨域问题——webpack的...

  • vue cli 解决跨域 线上 nginx 反向代理配置

    vue cli 解决跨域 线上 nginx 反向代理配置 前后分离 axios 接 api 跨域问题如图: 解决办...

  • webpack 代理与koa服务 api mockjs 数据

    目的: 解决开发联调中的痛点(存在跨域,不能请求),前端与后端本地联调阻断,webpack 代理转发解决请求 双向...

  • Webpack 开发服务器代理设置解决跨域问题

    在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,...

  • Js请求跨域问题

    一、请求跨域问题概述 跨域:指的是协议名、端口或者域名不一致的情况都是跨域。 二、跨域问题的解决方案 1、同域代理...

  • 60.webpack中的proxyTable

    proxyTable是解决开发环境中的跨域问题,正式环境的跨域需要使用nginx反向代理或者是后端解决 '/api...

  • vue简单接口封装 跨域问题处理

    vue接口封装: 第一步:解决跨域 接口请求,一般都会碰到跨域问题,在vue项目中,我们采用页面代理的方法解决跨域...

网友评论

      本文标题:webpack代理请求api,解决跨域问题。

      本文链接:https://www.haomeiwen.com/subject/ogkigxtx.html