AXIOS Post 无法在 Internet Explorer 中使用 REACT 应用程序答案

【问题标题】：AXIOS Post not working with REACT application in Internet ExplorerAXIOS Post 无法在 Internet Explorer 中使用 REACT 应用程序
【发布时间】：2019-07-17 00:28:36
【问题描述】：

注意：我已经有一个解决方案，我想在这里提供它作为一个问题/答案，所以如果其他人遇到这个问题，他们可以看看对我有用的东西是否也可以给他们。

我正在尝试做的事情： 我一直在研究需要将数据发送到 Java Servlet 的 REACT 应用程序。在网上看，我看到 AXIOS 被推荐使用 Post 命令来做到这一点。

问题： 我有以下代码在 Edge、Chrome 和 Firefox 中运行良好，但在 Internet Explorer 中失败（错误是 URLSearchParams 在 IE 的浏览器控制台中找不到）

        let axiosConfig = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        };            
        // Putting together the data to be passed to the java servlet.
        const params = new URLSearchParams();
        params.append('var1', this.state.data1);
        params.append('var2', this.state.data2);

        var urlToPost = 'https://localhost:8080/someServlet/someMethod';

        axios.post(urlToPost, params, axiosConfig)
            .then((res) => {
                // Handling Response from Servlet.
                console.log("AXIOS POST RESPONSE RECEIVED: ", res);
            })
            .catch((err) => {
                // Handler exception error thrown by Servlet.
                alert('Error during submission');
            })

【问题讨论】：

标签： reactjs post axios internet-explorer-11

【解决方案1】：

我在网上看到了一些关于如何解决它的建议，其中一些在 IE 中“有效”，这意味着我在 IE 浏览器控制台上没有错误，但是当数据到达 Java Servlet 时，提取的数据字段为空。

所以我的解决方案是在使用 Internet Explorer 时使用 jQuery 来发帖，例如：

       // This if statement checks to see if the user's browser is Internet Explorer
       // if its true then use jQuery to do the POST
       if((navigator.userAgent.indexOf("MSIE") !== -1 ) || (!!document.documentMode === true )) //IF IE > 10
       {
           var myObject = {
              var1: this.state.data1,
              var2: this.state.data2
            };
            var urlToPost = 'https://localhost:8080/someServlet/someMethod';
            $.post(urlToPost, myObject, 
                function(result) {  
                   // handle response
               })
              .done(function(result) {
                   // handle response
              })
              .fail(function(result) {
                  // handle response
              })
              .always(function(result) {
                 // handle response
              });

       } else {
        // use the AXIOS POST command code from my initial question above
       }

在此之前，我必须使用以下命令安装 jquery 和 promise：

npm 安装 jquery

npm install es6-promise

然后在我的 react 文件的顶部，我必须包含以下导入：

import $ from 'jquery';
import { polyfill } from 'es6-promise'; polyfill();

通过这些更改，Internet Explorer 不再给我任何控制台错误，并且我拥有的 Java Servlet 能够从 HTTP 响应对象中提取非空数据。

【讨论】：

【解决方案2】：

你需要在 IE 中为 URLSearchParams 使用 polyfill

https://www.npmjs.com/package/url-search-params-polyfill

【讨论】：