Webpack devServer中的 proxy 完结跨域的消除

Webpack dev server使用http-proxy消除跨域难点

前言:公司早先时代从来使用express和koa框架做项目,请求向来在服务端,所以并未有蒙受跨域的难点。在利用react做纯view项指标时候,跨域的主题材料就陪伴而来。怎么消除吗?除了让后端消除却,能够在webpack的配备上化解那几个难题,上边笔者介绍少一下消除的诀窍。

文书档案资料

在确认node_modules包含http-proxy-middleware模块的意况下安排devServer如下,否则先npm设置一下再配置。

webpack关于webpack-dev-server开启proxy的合法介绍

devServer: {
        proxy: {
          '/api': {
            target: 'https://xxx.sendinfo.com.cn',
            secure: false,
            changeOrigin:true //允许跨域请求
          }
        },
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        colors: true, //终端中输出结果为彩色
        historyApiFallback: true, //不跳转
        inline: true, //实时刷新
        hot: true  // 使用热加载插件 HotModuleReplacementPlugin
    }

Vue-cli proxyTable
消除开荒遭逢的跨域难点
——纵然那篇是写vue的,可是用在webpack-dev-server上也是千篇一律的

http-proxy-middleware——webpack-dev-server的完毕方式其实是对这些的包装

配置http-proxy

在webpack的配置文件(webpack.config.js)中开始展览布置

module.exports = {
 ...此处省略一万字

 // webpack-dev-server的配置
 devServer: {
 historyApiFallback: true,
 hot: true,
 inline: true,
 progress: true,
 port: 3000,
 host: '10.0.0.9',
 proxy: {
 '/test/*': {
 target: 'http://localhost',
 changeOrigin: true,
 secure: false
 }
 }
 },

 ...此处省略一万字
};

上述配置中,关于http-proxy的只是proxy:

{...}中的值

调用接口

为了有利于起见,下边采取jquery封装好的ajax函数举行出现说法

$.ajax({
 // url: 'http://10.0.0.9:3000/test/testFetch/Login.php', // 这样不行
 url: '/test/testFetch/Login.php', // 这样行
 type: 'post',
 data: {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 },
 success: function(data) {
 console.log(data);
 }
});

proxy中的部分参数表明
‘/test/*’ 以及 target:
 ‘http://localhost

从名字就会看到,这几个实在是将相称 ‘/test/*’
这种格式的API的域名重定向为 ‘http://localhost

构成位置的 “调用接口” 能够看到, url:
 ‘/test/testFetch/Login.php’
那句,实际上会自动补充前缀,也正是说,url:
 ‘/test/testFetch/Login.php’ 等价于 url:
http://10.0.0.9:3000/test/testFetch/Login.php

不过,大家使用了http-proxy实行重定向,那样的话,url:
 ‘/test/testFetch/Login.php’ 等价于 url:
http://localhost/test/testFetch/Login.php

changeOrigin

  • true/false, Default: false – changes the origin of the host header
    to the target URL
  • 本土会编造贰个服务端接收你的央求并代你发送该请求——那一个是人家的说教
  • 自个儿试了瞬间,固然那一个参数设置成 false
    也可能有1部分情况是足以的,具体原因不详,所以照旧将其设置成 true 吧

secure

  • true/false, if you want to verify the SSL Certs

pathRewrite

例子: pathRewrite:
 {‘^/api’: ”}

Object-keys will be used as RegExp to match paths

作者猜,这里是将 ‘^/api’ 使用 ”
替代(只是小编猜,没是打响,预计是自己的正则表明式写得特别)

凭就算用Fetch API的代码

上述代码与 “调用接口” 中使用 $.ajax() 完结的效益是1律的

let testAsync = async function () {
 var feeling = {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 };

 var fetchParams = {
 method: 'post',
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json'
 },
 credentials: 'include', // 将凭证也带上(例如cookies)
 body: JSON.stringify(feeling),
 };

 let temp = await fetch('/test/testFetch/Login.php', fetchParams).then(response => response.text());
 console.log(temp); // 这个就是一个json对象
 return temp;
};

let data = testAsync(); // async函数返回值是一个Promise对象
console.log(data); // 这个是一个Promise对象

如上就是本文的全部内容,希望对我们的求学抱有协助,也愿意大家多多协助脚本之家。

您只怕感兴趣的小说:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图