移动 Chrome 上的 CORS Allow-Access-Control-Origin答案

【问题标题】：CORS Allow-Access-Control-Origin on Mobile Chrome移动 Chrome 上的 CORS Allow-Access-Control-Origin
【发布时间】：2018-04-03 06:20:50
【问题描述】：

当我使用 Chrome 试用我的新响应式网络应用时，我在移动设备上遇到错误。从以几种不同的方式添加 php 标头到在我的 ajax 请求中传递标头，我已经完成了所有工作。在网络上，我使用了 CORS 切换，这是一个 Chrome 扩展程序，可让您打开和关闭 CORS，从而解决了网络上的问题。然而，我似乎无法为移动设备找到这样的解决方案。无论如何，我可以在移动 Chrome 上绕过 CORS？？

我已经尝试了所有这些方法，但似乎没有任何效果..

php 选项 1：

<?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Headers: Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With');
  header('Access-Control-Allow-Methods: GET, PUT, POST');
?>

php选项2：

<?php
    // Allow from any origin
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Credentials: true ");
        header("Access-Control-Allow-Methods: OPTIONS, GET, POST");
        header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control");
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(0);
    }

    echo "You have CORS!";
?>

jQuery AJAX：

$.ajax({
          url: '<MY API ENDPOINT>',
          method: 'POST',
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With",
            'Access-Control-Allow-Methods': "GET, PUT, POST",
            'Authorization':
              'Bearer <MY TOKEN>',
            'Cache-Control': 'no-cache'
          },
          data: formData,
          processData: false,
          contentType: false
        }).done(function(res) {

【问题讨论】：

Access-Control-Allow-* 标头由服务器而不是客户端设置，因此将它们添加到您的 ajax 调用中没有任何作用。 "MY API ENDPOINT" 是否在您自己的服务器上？如果没有，那么在您的 php 中设置标头也不会执行任何操作。
我正在使用 salesforces 的 api.einstein.ai/v2/vision/predict

标签： php jquery ajax google-chrome cors

【解决方案1】：

从您的 ajax 请求中删除访问控制标头。访问控制标头由浏览器自动设置，如 W3C CORS 规范中所定义。

无论您在 ajax 请求中包含什么标头，都需要在服务器响应中允许。在您的情况下，它是 Authorization 和 Cache-Control。将它们添加到Access-Control-Allow-Headers。

使用 php 代码的选项 2。它包括对 cors preflight OPTIONS 请求的响应。出于这个原因，选项 1 将不起作用。

【讨论】：