将 HttpHeader 添加到静态文件以解决“脚本错误”

Posted 2023-03-04

【中文标题】将 HttpHeader 添加到静态文件以解决“脚本错误”

【英文标题】：Add HttpHeader to Static File to solve "Script Error"

【发布时间】：2019-11-24 05:51:21

【问题描述】：

一个星期以来，我一直在努力解决这个问题。希望有人能看到我缺少的东西。

我有两个项目：localhost:A (Web-Api) 托管一个 js 文件，localhost:B (.NET MVC) 使用该 js 文件。当试图捕获 js 文件中的错误并将其发送到 localhost:A 时，我收到一条神秘的 Script Error 消息，而不是实际错误。

快速的谷歌搜索告诉我这是一种安全措施，可以防止localhost:A 收集有关客户的信息。为了解决这个问题，我需要做两件事：

在js文件中添加crossorigin='anonymous'localhost:B的引用 将 HttpHeader Access-Control-Allow-Origin="*" 添加到 js 文件响应中。

我已经找到了几种在 Web-Api 上执行 2. 的方法，但似乎都没有。

我尝试在 Web.config 文件中添加标头，如下所示：

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*"/>
  </customHeaders>
<httpProtocol>

我尝试在 Global.asax.cs 文件中添加标题，如下所示：

public static void Register(HttpConfiguration config)

    var corsAttr = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(corsAttr);

    config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;

    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/controller/action/id",
        defaults: new  id = RouteParameter.Optional 
    );

我尝试在 Startup.cs 文件中添加标题，如下所示：

public void Configuration(IAppBuilder app)

    //app.UseCors(CorsOptions.AllowAll);<--and here
    app.Map("/signalr", map =>
    
        map.UseCors(CorsOptions.AllowAll);
        var hubConfiguration = new HubConfiguration
        
            EnableDetailedErrors = true
        ;
        map.RunSignalR(hubConfiguration);
    );

HTTP 和 SignalR 传输与标头一起发生，但正在获取的文件缺少标头。

我错过了什么？

编辑：这是当前请求和响应标头的屏幕截图：

编辑 2：如果我删除 startup.cs 中的代码，并在 web.config 中添加代码，我开始获取标头，但也开始获取 404 响应以寻找信号器/集线器。在 startup.cs 和 webconfig 中有代码会给我这个错误：The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

【问题讨论】：

您看到浏览器发出 OPTIONS 请求了吗？如果是，响应是什么。你能检查一下网络标签中发生了什么吗？

@TarunLalwani 查看我的编辑。

您是否在 IIS 中托管？如果是这样，很可能是 IIS 正在处理对静态资源的请求，而不是您的应用程序代码。该线程会更详细地介绍可能会帮助您诊断此问题的信息，以及一些可供您使用的选项。 ***.com/questions/12458444/….

@DylanMorley 我的 web.config 中已经有 <remove name="OPTIONSVerbHandler"/> 并且 Application_BeginRequest 似乎从未遇到过 OPTIONS HttpMethod

你试过Content-type: application/javascript吗？

【参考方案1】：

如果我正确理解了您的问题，那么您是从浏览器请求 localhost:B 并且 site B 响应发送的页面会加载一些站点 A 中的 javascript 文件。

如果上述理解正确并且您收到跨源请求错误，那么您收到此错误是因为 站点 A 不允许 站点 B 请求资源.为此，您必须在 站点 A 中进行更改，以允许来自 站点 B 的 CORS 请求。根据您使用的服务器端语言，您可以谷歌如何允许 cors 请求。 here 是 .net Web API 的示例

编辑 我不是 .NET 开发人员，但只是注意到您的 web.config 中有错误。它没有告诉允许哪些方法，所以我在互联网上搜索，发现这是使用 web.config 的正确方法：

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:B"/>
    <add name="Access-Control-Allow-Methods" value="*" />
    <add name="Access-Control-Allow-Headers" value="*" />
  </customHeaders>
<httpProtocol>

【讨论】：

我很清楚我需要 siteA 来允许来自 siteB 的 CORS 请求。有关更多说明，请参见 EDIT 2。

知道了...在我的回答中查看编辑...让我知道它是否有效... :)

【参考方案2】：

我一直没能找到解决办法。我最终为 js/css 文件创建了一个 CDN，它允许我在 web.config 中设置自定义标头，同时将信号器配置保留在另一个项目中。