在开发模式下使用 react答案

【问题标题】：Working with react on dev mode在开发模式下使用 react
【发布时间】：2016-11-14 19:16:08
【问题描述】：

我的服务器端是一个C# mvc 项目。

我们尝试实现对客户端的响应。

我使用node-js 和npm，使用express 服务器和hot-reloading，所以当我编译我的客户端代码时，它在http://localhost:3000 上运行。

现在我想添加一些服务器端调用。为此，我使用 iis express 运行我的c# 代码，该代码也在另一个端口的 localhost 上打开。现在的问题是，当端口：3000 上的客户端代码对也在 localhost 上的 iis express 进行 ajax 调用时，我收到 "Response for preflight is invalid (redirect)" 错误，这是因为相同的域策略。

那么我做错了什么，当您的服务器和客户端分开时，您打算如何在开发模式下工作？

我试图添加到我的 ASP.NET

 <httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Accept, Content-Type, Origin" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

编辑 - 解决方案

当您将帖子发送到不同的域时，首先客户端发送OPTIONS 请求。所以解决方法其实就是添加这段代码：

protected void Application_BeginRequest(object sender, EventArgs e)
{
    EnableCrossOriginRequestsFromLocalhost(HttpContext.Current.Request);
}

private void EnableCrossOriginRequestsFromLocalhost(HttpRequest request)
{
    if (!HttpContext.Current.Request.IsLocal) return;
    if (request.UrlReferrer == null) return; //can't set Access-Control-Allow-Origin header reliably without a referrer so just return. Referrer should always be set when being called from an app under development because the app under development's URL will be sent as the referrer automatically.
    var response = HttpContext.Current.Response;
    response.AddHeader("Access-Control-Allow-Origin", request.UrlReferrer.GetLeftPart(UriPartial.Authority));
    response.AddHeader("Access-Control-Allow-Credentials", "true");
    if (request.HttpMethod == "OPTIONS")
    {
        response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");
        response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
        response.AddHeader("Access-Control-Max-Age", "1728000");
        response.End();
    }
}

【问题讨论】：

你应该在你的 IIS express 上允许 CORS。 preflight 是 HTTP OPTIONS 请求，其中服务器应以 Allow-Control-* 标头响应。下面是对 CORS 的精彩介绍：html5rocks.com/en/tutorials/cors
@zeronone 我试过了，看看我的编辑，它不起作用，它适用于获取请求，但不适用于 post
查看此链接：stackoverflow.com/questions/33645511/…
显然我以前看过这个帖子，但同样，它没有解决它
您是否通过 POST 请求提交表单？尝试将 Content-Type 设置为 application/x-www-form-urlencoded

标签： c# node.js

【解决方案1】：

在您的情况下，应用程序的“React”部分都归结为静态资源：引导应用程序的初始 html 文件、带有 React 组件的 .js 包和它们的依赖关系，以及任何其他静态资产，如 .css 文件、图像，从初始 html 文件（通过脚本标签、链接标签等）引用。

然后，您应用的 C# 部分只关心动态请求，这相当于 api/ajax 调用以获取 React 将用于在浏览器中呈现应用的数据。

我将假设您正在使用 Webpack 和 Webpack Dev Server。开发时最简单的方法是让您的 Webpack 开发服务器将任何 api/ajax 请求代理到运行 IISExpress 的端口。这是 Webpack.config.js 文件中的一个简单设置（参见 https://webpack.github.io/docs/webpack-dev-server.html#proxy）。您可以在构建期间使用 Webpack 创建捆绑包，然后在运行时将它们作为静态资源从 Web 服务器提供。

在生产环境中，IIS 为所有内容（静态和动态请求）提供服务，并可能在提供服务之前授权访问引导您的 React 应用程序的 html 资源，因此不涉及 Express 服务器。

【讨论】：