Javascript 尽管CORS配置有效，“飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许来源”

我使用googlecloud函数创建了一个API端点，并试图从jsfetch函数调用它

我遇到了一些错误，我很确定这些错误与CORS或输出格式有关，但我不确定到底发生了什么。其他几个SO问题也很相似，帮助我意识到我需要取消模式：无cors。大多数人都提到在BE上启用CORS，所以我添加了response.headers.set'Access-Control-Allow-Origin'、'*'，这是我在中了解到的，以确保启用CORS。。。但我仍然得到了无法获取的错误

以下链接的现场演示中可再现的全部错误为：

未捕获错误：无法添加节点1，因为具有该id的节点不可用 已经在店里了。这可能是无关的

取 'https://us-central1-stargazr-ncc-2893.cloudfunctions.net/nearest_csc?lat=37.75&lon=-122.5' 源于https://o2gxx.csb.app'已被CORS策略阻止： 不允许请求标头字段访问控制允许来源 访问控制允许飞行前响应中的标头

得到 net:：ERR_失败

承诺类型错误中未捕获：无法获取

---

参见下面的代码片段，请注意我在哪里使用了删除前端代码中添加访问控制允许原始请求头的部分

不要在前端JavaScript代码中添加Access Control Allow Origin作为请求头

唯一会产生负面影响的是，它会导致浏览器执行CORS飞行前选项请求，即使来自前端代码的实际GET、POST等请求不会触发飞行前选项。然后预飞将失败，并显示以下消息：

飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许来源

…也就是说，除非向其发出请求的服务器配置为发送访问控制允许标头：访问控制允许源响应标头，否则它将失败

但是，您永远不希望在Access Control Allow Headers响应标头值中包含Access Control Allow Origin。如果这最终能让事情顺利进行，那么实际上你只是在解决错误的问题。因为真正的解决方法是：永远不要将访问控制允许源设置为请求头

直观地说，将其视为“我已经在请求和响应中设置了访问控制允许来源，因此这应该比在响应中设置好”——这似乎是合乎逻辑的，但由于上述原因，它实际上比仅在响应中设置更糟糕

因此，底线是：访问控制允许源只是一个响应头，而不是请求头。所以您只需要在服务器端响应代码中设置它，而不是在前端JavaScript代码中设置它

问题中的代码还试图添加源标题。您也永远不想尝试在前端JavaScript代码中设置该头

---

与Access Control Allow Origin标头不同，Origin实际上是一个请求标头，但它是一个完全由浏览器控制的特殊标头，浏览器永远不允许前端JavaScript代码设置它。因此，永远不要尝试删除前端代码中添加访问控制允许原始请求标头的部分

不要在前端JavaScript代码中添加Access Control Allow Origin作为请求头

唯一会产生负面影响的是，它会导致浏览器执行CORS飞行前选项请求，即使来自前端代码的实际GET、POST等请求不会触发飞行前选项。然后预飞将失败，并显示以下消息：

飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许来源

…也就是说，除非向其发出请求的服务器配置为发送访问控制允许标头：访问控制允许源响应标头，否则它将失败

但是，您永远不希望在Access Control Allow Headers响应标头值中包含Access Control Allow Origin。如果这最终能让事情顺利进行，那么实际上你只是在解决错误的问题。因为真正的解决方法是：永远不要将访问控制允许源设置为请求头

直观地说，将其视为“我已经在请求和响应中设置了访问控制允许来源，因此这应该比在响应中设置好”——这似乎是合乎逻辑的，但由于上述原因，它实际上比仅在响应中设置更糟糕

因此，底线是：访问控制允许源只是一个响应头，而不是请求头。所以您只需要在服务器端响应代码中设置它，而不是在前端JavaScript代码中设置它 问题中的代码还试图添加源标题。您也永远不想尝试在前端JavaScript代码中设置该头

---

与Access Control Allow Origin标头不同，Origin实际上是一个请求标头，但它是一个完全由浏览器控制的特殊标头，浏览器永远不允许前端JavaScript代码设置它。所以永远不要尝试。

不要尝试在前端JavaScript代码中添加访问控制允许源代码作为请求头。也不要尝试添加原始标题。浏览器不允许您进行设置。因此，您需要从前端获取调用中删除整个headers块，然后重试-然后用删除headers块后发生的情况的详细信息更新问题。删除Origin:lget3.csb.app，访问控制允许Origin:*从FE中成功！谢谢。我仍然有点困惑，为什么它会起作用，以前出了什么问题。FE现在与我开始查找如何解决CORS错误之前一样。但我也改变了主意，也许这就是所需要的一切？如果你想写一个答案，解释为什么我不需要FE上的标题，就像许多其他答案所建议的那样，以及BE上需要什么，我会很高兴地接受它！好的，最后我开始写一个实际的答案。注意，我还冒昧地更新了问题的标题-我这样做是为了概括根本问题的描述，以便将来遇到相同问题的读者/搜索者可以在这里找到解决方案/答案，不管是什么，无论前端和后端框架/库/运行时的具体组合是什么，因为解决方案对任何特定的技术选择都是不可知的。不要尝试在前端JavaScript代码中添加access control allow origin作为请求头。也不要尝试添加原始标题。浏览器不允许您进行设置。因此，您需要从前端获取调用中删除整个headers块，然后重试-然后用删除headers块后发生的情况的详细信息更新问题。删除Origin:lget3.csb.app，访问控制允许Origin:*从FE中成功！谢谢。我仍然有点困惑，为什么它会起作用，以前出了什么问题。FE现在与我开始查找如何解决CORS错误之前一样。但我也改变了主意，也许这就是所需要的一切？如果你想写一个答案，解释为什么我不需要FE上的标题，就像许多其他答案所建议的那样，以及BE上需要什么，我会很高兴地接受它！好的，最后我开始写一个实际的答案。注意，我还冒昧地更新了问题的标题-我这样做是为了概括根本问题的描述，以便将来遇到相同问题的读者/搜索者可以在这里找到解决方案/答案，不管是什么，无论前端和后端框架/库/运行时的具体组合是什么，因为解决方案对任何特定的技术选择都是不可知的。

function getCSC() {
  let lat = 37.75;
  let lng = -122.5;

  fetch(
    `https://us-central1-stargazr-ncc-2893.cloudfunctions.net/nearest_csc?lat=${lat}&lon=${lng}`,
    {
      method: "GET",
      // mode: "no-cors", <---- **Uncommenting this predictably gets rid of CORS error but returns a Opaque object which seems to have no data**
      headers: {
        // Accept: "application/json", <---- **Originally BE returned stringified json. Not sure if I should be returning it as something else or if this is still needed**
        Origin: "https://lget3.csb.app",
        "Access-Control-Allow-Origin": "*"
      }
    }
  )
  .then(response => {
      console.log(response);
      console.log(response.json());
    });
}

import json
import math
import os
import flask

def nearest_csc(request):
    """
    args: request object w/ args for lat/lon
    returns: String, either with json representation of nearest site information or an error message
    """

    lat = request.args.get('lat', type = float)
    lon = request.args.get('lon', type = float)

    # Get list of all csc site locations
    with open(file_path, 'r') as f:
        data = json.load(f)
        nearby_csc = []

        # Removed from snippet for clarity:
        #    populate nearby_csc (list) with sites (dictionaries) as elems
        #    Determine which site is the closest, assigned to var 'closest_site'              

        # Grab site url and return site data if within 100 km
        if dist_km < 100:
            closest_site['dist_km'] = dist_km
            
            // return json.dumps(closest_site) <--- **Original return statement. Added 4 lines below in an attempt to get CORS set up, but did not seem to work**

            response = flask.jsonify(closest_site)
            response.headers.set('Access-Control-Allow-Origin', '*')
            response.headers.set('Access-Control-Allow-Methods', 'GET, POST')
            return response

        return "No sites found within 100 km"