如何在 JavaScript/Chrome 中本地执行跨域请求？答案

【问题标题】：How to perform cross domain requests locally in JavaScript/Chrome?如何在 JavaScript/Chrome 中本地执行跨域请求？
【发布时间】：2014-10-30 10:34:32
【问题描述】：

我正在开发一个测试页面，仅供我自己使用，并且只能与 Google Chrome 一起使用。有没有办法在这样的条件下对第三方服务器（不允许这样的请求）执行跨域请求？请求可以是GET 或OPTIONS。

（我知道高级 REST 客户端等 Chrome 扩展程序可以执行此类请求，但它对我没有帮助，因为应在请求执行之前执行复杂的计算）

【问题讨论】：

我以前没用过，但是你能不能不发出ajax请求而使用类似``beforeSend`的东西？
@SpYk3HH，不要以为我理解你 - beforeSend 可以在这里提供帮助吗？
您说doesn't help me since complex calculations should be performed prior to request execution 我认为您的问题是如何在提出请求之前执行这些请求。在这种情况下，只需使用 beforeSend 和下面的 Losbear 答案
@SpYk3HH，我知道如何在请求之前执行计算。问题是如何执行跨域请求。
啊好吧，只是想帮忙。根据我对此的研究，看起来洛斯贝尔的答案已经死了

标签： javascript jquery google-chrome cross-domain

【解决方案1】：

一种选择是完全禁用同源策略，详见Disable same origin policy in Chrome。这可能会为您解决问题，但它有点不雅，因为它关闭了整个浏览器实例的同源策略。

第二种选择是创建一个小型 Chrome 扩展程序，其中包含您需要加载的所有文件。它将使您的文件可以通过chrome-extension://... 访问，并且只有该扩展名中的文件才能免受同源策略的影响。

创建一个新文件夹，将您的测试网页放入其中，并在同一文件夹中创建一个manifest.json 文件：

/testing_extension
    test_page_immune_from_same_origin.html
    script_used_by_test_page.js
    styles_for_test_page.css
    manifest.json

manifest.json的内容应该是

{
  "name": "All-origin access extension",
  "manifest_version": 2,
  "version": "1.0",
  "permissions": ["<all_urls>"]
}

通过转到chrome://extensions，启用Developer Mode，然后使用Load unpacked extension... 选项选择新文件夹来加载扩展。

您可以将您的页面作为扩展资源chrome-extension://[app_id]/[file_name] 查看，其中“app_id”是为chrome://extensions 页面上的扩展列出的哈希值。（这将是一长串小写字母。）现在当页面执行跨域资源时，它具有浏览器扩展的权限，不受同源策略的限制。

请注意，您需要移动任何 inline scripts into separate files 以符合扩展 CSP 要求。

【讨论】：

谢谢！我可以使用这种方法在线修改我的页面（`test_page_immune_from_same_origin.html`）吗？ IE。如果我需要在那里更改某些内容，我是否必须再次删除/添加扩展名？或者，我只需要刷新页面吗？
我认为您可以在更改文件时简单地刷新扩展页面；除非您更改清单，否则无需重新加载扩展。如果您的文件托管在网络服务器上，则需要将其下载到本地文件系统，如果需要从网络服务器的版本中提取任何更改，请重新下载。
谢谢，它有效！（我不得不稍微更改页面 - 以符合内容安全政策 - developer.chrome.com/extensions/contentSecurityPolicy）
@LA_ 对，当然；我在回答中添加了有关 CSP 要求的说明。

【解决方案2】：

一种方法是通过网络服务器而不是本地文件系统来提供文件。另一种方法是使用标志启动 Chrome：

chrome --disable-web-security

（来自Cross-origin image load denied on a local image with THREE.js on Chrome）

更广泛的标志列表在这里：http://peter.sh/experiments/chromium-command-line-switches/

【讨论】：

谢谢。我之前读过这个标志，但真的不想禁用所有标签/页面的网络安全。

【解决方案3】：

我正在做一个与此类似的项目，我必须将一个简单的 html 文件上传到我的一个产品服务器进行测试，以便我可以测试跨域功能。 html 文件指向 localhost，所以它只在开发时对我有用。

jquery 代码如下所示（以防万一）：

        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: url,
            data: data,
            crossDomain: true,
            success: function (data) {
                ATSJBAjax = null;
                if (callback != null) callback(data);
            }
        });

另外，我使用的是 c#/MVC，我必须向所有控制器方法添加一个属性，将“Access-Control-Allow-Origin”添加到响应标头中，以便 Chrome 可以使用它。我将属性称为“AllowCrossDomainAccess”，它引用了以下类：

public class AllowCrossDomainAccessAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
        base.OnActionExecuting(filterContext);
    }
}

【讨论】：

谢谢，但这与我所拥有的不同 - 我应该与第 3 方服务器通信，所以我无法添加标题 Access-Control-Allow-Origin。