如何使用 axios 通过 webpack 开发服务器向远程服务器上的 API 发送请求答案

【问题标题】：How to send request to an API on remote server via webpack devlopment server using axios如何使用 axios 通过 webpack 开发服务器向远程服务器上的 API 发送请求
【发布时间】：2019-11-05 21:28:10
【问题描述】：

我想从支持 REST API 的远程服务器获取一些数据。我正在使用 axios 和 web-dev-server。我的前端正在发送请求，我同时使用了 firefox 和 chrome 打开我的前端。但是，每次我尝试提出请求时，都会遇到 cors 错误。此外，我不想在我的服务器上进行任何更改。 Firefox 和 chrome 正在发送此标头。

接受：*/* 接受编码：gzip，放气接受语言：en-US,en;q=0.5 连接：保持活动主机：my.ip.to.host:port 来源：http://localhost:3000 引用者：http://localhost:3000/login 用户代理：Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/67.0

我尝试在没有 web-dev-server 的在线平台上运行我的简单请求代码，并且运行得非常好。

这是我的代码

//********** 我的请求********* 返回 axios .get('http://my.ip.to.host:port/api/User/login', { 标题：{ 接受：'/' } }) .then（函数（响应）{ 控制台日志（响应）；返回“用户”； }) .catch（函数（错误）{ 控制台日志（错误）；返回“错误”； }); //********************************** //*****webpack.config.js******** var HtmlWebpackPlugin = require('html-webpack-plugin'); 需要('babel-polyfill'); 模块.exports = { 模式：'发展'，条目：['babel-polyfill'，'./src']，解决： { 扩展名：['.js', '.jsx'] }, 模块： { 规则：[ { 测试：/.jsx?$/, 加载器：'babel-loader' } ] }, 插件：[ 新的 HtmlWebpackPlugin({ 模板：'./src/index.html' }) ], 开发服务器：{ historyApiFallback: true, 端口：3000 }, 外部：{ // 全局应用配置对象配置：JSON.stringify（{ apiUrl: 'http://localhost:4000', checkLogin: 'http://my.ip.to.host:port/api/User/login' }) } };

这是我遇到的错误。

跨域请求被阻止：同源策略不允许在 http://my.ip.to.host:port/api/User/login 读取远程资源。（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。`在此处输入代码`

【问题讨论】：

标签： reactjs webpack proxy remote-access remote-server

【解决方案1】：

您需要在 axios config 中将withCredentials 设置为true。 Cors Setting

let HttpInterceptor = axios.create({
  headers: {
    Accept: "*/*"
  }
});

HttpInterceptor.interceptors.request.use(
  function(config) {  
    config.withCredentials = true; // To enable CORS
    return config;
  },
  function(error) {
    return promise.reject(error);
  }
);



//********** Your request*********
    return HttpInterceptor
        .get('http://my.ip.to.host:port/api/User/login')
        .then(function(response) {
            console.log(response);
            return 'user';
        })
        .catch(function(error) {
            console.log(error);
            return 'err';
        });

【讨论】：

不走运，不适合我。尽管如此，还是会弹出同样的错误。
您的后端支持 cors 请求吗？你确定吗？

【解决方案2】：

Google 在这里很好地解释了 cors(Cross-origin requests)。

我通过托管代理服务器（在我托管客户端的同一本地服务器上）并通过它重定向我的所有单页应用程序请求来解决此问题。

首先，我在 webpack 配置文件的 devsever 键中创建了一个代理设置，像这样。



    devServer: {
        proxy: {
    //abc is REST API request endpoint on my backend
            '/abc': {
                //target is where your proxy server is hosted
                target: 'http://localhost:5000',
                secure: 'false'
            },
    //xyz is REST API request endpoint on my backend
            '/xyz': {
                //target is where your proxy server is hosted
                target: 'http://localhost:5000',
                secure: 'false'
            }
        },......// rest of the setting
      }

那么，对于通过我的客户端对某个操作的特定调用，我会像这样向我的后端发出请求。



    axios
        .get('/startAppkey', { withCredentials: true })// withCredential enables passing of cookies and session id. If you dont want to creat session you can avoid this.
        .then((response) => {
                           // do stuff with response
                            })
                        .catch(function() {
                         //do stuff
                        });

我们的客户已准备就绪。现在是代理服务器的时候了。先安装http-proxy-middleware，像这样。



    sudo npm i --save http-proxy-middleware
    //it is also avilable on yarn

那么，在这里设置代理服务器只需几行代码。

从'express'导入*作为快递； // 使用 express 来支持我的中间件从 'http-proxy-middleware' 导入 * 作为代理；常量应用程序 = 快递（）； // 路径 /abc 和 /xyz 应该和你在 webpack 配置文件中声明的一样 app.use('/abc', proxy({ target: 'http://your/backend/api/endpoint'})); app.use('/xyz', proxy({ target: 'http://your/backend/api/endpoint'})); //就是这样，你在这里完成了。

【讨论】：