如何在 localhost 中连接到两个不同的 Web 服务器

Question

我正在尝试使用 react 构建我的网站。

我正在使用 webpack-dev-server 在 localhost:8080 为 react 网站提供服务。

我在 localhost:9000 中运行了另一台服务器，该服务器具有我们网站的 api。

但是当我尝试向 localhost:9000 发出获取请求以获取数据时，我遇到了以下错误。

您的 fetch 操作出现问题：在 'Window' 上执行 'fetch' 失败：'http://127.0.0.1:9000' 的来源应该与 'http://localhost:8080' 相同

我该如何解决？

Answer 1

听起来浏览器阻止了对 API 的请求，因为主机不同 - 这是由CORS headers 控制的，API 可以发送它说“这些是允许发出请求的主机”。您可以使用通配符关闭此检查 - 如gist here中所述

def add_cors_headers(response):
    response.headers['Access-Control-Allow-Origin'] = '*'
    if request.method == 'OPTIONS':
        response.headers['Access-Control-Allow-Methods'] = 'DELETE, GET, POST, PUT'
        headers = request.headers.get('Access-Control-Request-Headers')
        if headers:
             response.headers['Access-Control-Allow-Headers'] = headers
    return response
app.after_request(add_cors_headers)