如何克服 ReactJS 中的 CORS 问题

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

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

对于CORS问题，还有另一种黑客手段.您必须使用nginx服务器作为服务器和客户端的代理来部署代码.

考虑这个例子.

你的服务器是my-server.com，客户端是my-client.com

// 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将是可访问代码的网站的最终名称(代理网站的名称).

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

如果你不熟悉nginx，我建议你仔细判断一下documentation.

简要解释上述配置中发生的情况:

• upstream定义了请求将被重定向到的实际服务器
• server块用于定义nginx服务器的实际行为.
• 如果有多个服务器块，server_name用于标识将用于处理当前请求的块.
• error_log和access_log指令用于定义日志(log)文件的位置(用于调试)
• location个块定义了不同类型请求的处理:

Note: 100 here is being used to distinguish the client side requests from the server side requests. Since the domain is the same there is no other way of distinguishing requests. Keep in mind there is no such convention that compels you to add 100 in all such use cases. It can be changed to any other string eg. 102, 103, etc.

尽管这种技术应该可以做到这一点，但我强烈建议您向服务器添加CORS支持，因为这是处理此类情况的理想方式.

如果你想在开发时避免所有这些，你可以使用this个chrome扩展.它应该允许您在开发过程中执行跨域请求.