当前位置: 首页 > 面试题库 >

如何克服ReactJS中的CORS问题

仲孙翔飞
2023-03-14
问题内容

我正在尝试通过React应用程序中的Axios进行API调用,但是我在浏览器中遇到了CORS问题。我想知道我是否可以从客户端解决此问题,因为我内部没有对API的任何访问权。附加的是我的代码。

const response = axios({
   method: 'post',
   dataType: 'jsonp',
   url: 'https://awww.api.com',
   data: {
    'appToken':'',
    'request':{ 
        'applicationName':'ddfdf', 
        'userName':'jaime@dfd.com', 
        'password':'dfd', 
        'seasonIds':[1521ddfdfd5da02] 
     }
     }
    });
   return{
    type:SHARE_REVIEW,
    payload:'response'
 }
 }

附件是我的WebPack.config.js

module.exports = {

entry: [
'./src/index.js'
 ],
output: {
  path: __dirname,
  publicPath: '/',
  filename: 'bundle.js'
},
module: {
 loaders: [{
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015', 'stage-1']
  }
 },
 { test: /\.json$/, loader: "json-loader"}]
  },
 resolve: {
  extensions: ['', '.js', '.jsx']
 },
devServer: {
historyApiFallback: true,
contentBase: './'
},
node: {
 dns: 'mock',
 net: 'mock'
 },
 };

问题答案:

理想的方法是向服务器添加CORS支持。

您也可以尝试使用单独的jsonp模块。据我所知axios不支持jsonp。因此,我不确定您使用的方法是否符合有效的jsonp请求。

对于CORS问题,还有其他解决方法。您将必须使用作为服务器和客户端代理的nginx服务器部署代码。可以欺骗我们的是proxy_pass指令。以某种方式配置nginx服务器,以便处理您的特定请求的位置块将proxy_pass或将您的请求重定向到实际服务器。由于网站域的更改,通常会发生CORS问题。当您有一个单独的代理充当客户端和服务器的角色时,浏览器会被愚弄为服务器和客户端位于同一个域中。Ergo
no CORS。

考虑这个例子。

您的服务器为my-server.com,客户端为my-client.com Configure nginx,如下所示:

// nginx.conf

upstream server {
    server my-server.com;
}

upstream client {
    server my-client.com;
}

server {
    listen 80;

    server_name my-website.com;
    access_log /path/to/access/log/access.log;
    error_log /path/to/error/log/error.log;

    location / {
        proxy_pass http://client;
    }

    location ~ /server/(?<section>.*) {
        rewrite ^/server/(.*)$ /$1 break;
        proxy_pass http://server;
    }
}

my-website.com将是可访问代码的网站的最终名称(代理网站的名称)。以这种方式配置nginx之后。您将需要修改请求,以便:

  • 所有API调用均从更改my-server.com/<API-path>my-website.com/server/<API-path>

如果您不熟悉nginx,我建议您仔细阅读本文档。

简要解释上面的配置中发生了什么:

  • upstream小号定义实际的服务器向谁请求将被重定向
  • server块用于定义nginx服务器的实际行为。
  • 如果有多个服务器块,server_name则用于标识将用于处理当前请求的块。
  • error_logaccess_log指令用于定义日志文件的位置(用于调试
  • 这些location块定义了不同类型的请求的处理:
    1. 第一个位置块处理所有以/所有这些请求开头的请求,这些请求均被重定向到客户端
    2. 第二个位置块处理所有以开头的请求/server/<API-path>。我们将所有此类请求重定向到服务器。

注意:/server此处用于区分客户端请求和服务器端请求。由于域相同,因此没有其他区分请求的方法。请记住,没有这样的约定可以强迫您/server在所有此类用例中添加。可以将其更改为任何其他字符串,例如。/my- server/<API-path>/abc/<API-path>等等。

即使此技术可以解决问题,但我还是强烈建议您向服务器添加CORS支持,因为这是应对此类情况的理想方法。

如果您希望在开发时避免做所有这些事情,可以使用此
chrome扩展程序。它应该允许您在开发期间执行跨域请求。



 类似资料:
  • 我正在尝试通过我的React应用程序中的Axios进行API调用。但是,我在浏览器上遇到了这个CORS问题。我想知道我是否可以从客户端解决这个问题,因为我在内部没有任何对API的访问权限。附件是我的代码。 附件是我的WebPack.config.js

  • 问题内容: 我正在尝试通过React应用程序中的Redux动作和reducers进行api调用。 但是,我的浏览器出现了这个CORS问题。 我想知道我是否可以从客户端解决此问题,因为我内部没有对API的任何访问权限。 谁能帮我解决这个问题? 这是newsActions.js的代码: 这是server.js的代码: 如果您需要其他信息或有疑问,请在下面对其进行评论。 谢谢。 问题答案: 您可以通过将

  • 问题内容: 我实现了一个ajax轮询脚本,该脚本每10秒在服务器Controller中调用一次操作。通过响应,我替换了的内容: 这是通过 https 完成的。经过一段时间的“空闲”,IE会显示以下消息: 该页面正在访问不受其控制的信息。这带来了安全风险。你想继续吗? 如果用户单击“ 是” ,则页面将重定向到仅显示响应的页面。如果用户单击“ 否” ,则什么都不会发生,但是不会刷新容器。 我知道我可以

  • 当我的应用程序安装到Android L preview时,它会失败,出现错误: install_failed_no_matching_abis。 我的应用程序只使用arm库,使用库的功能在x86上被禁用。它在Android L之前工作得很完美,但现在我连它都装不上了。如何为我的应用程序禁用此错误?

  • 刚刚开始使用scala和spark来运行这个简单的程序:

  • 我正在使用reactjs构建一个前端唯一的基本天气应用程序。对于API请求,我使用Fetch API。在我的应用程序中,我从一个简单的API获取当前位置,它以JSON对象的形式给出了位置。但是当我通过获取API请求它时,我得到了这个错误。 所以我搜索并找到了多种解决方案来解决这个问题。 在Chrome启用CORS解决了这个错误,但是当我在heroku上部署应用程序时,我如何通过移动设备访问它,而不