允许 api.glossgenius.com 的 CORS答案

【问题标题】：Allowing CORS for api.glossgenius.com允许 api.glossgenius.com 的 CORS
【发布时间】：2021-11-23 01:56:30
【问题描述】：

我需要帮助，我不确定如何使来自“api.glossgenius.com”的 API 响应正常工作以使网站的元素正常工作。

https://studio21md.com/portfolio

跨域请求被阻止：同源策略不允许读取位于https://api.glossgenius.com/v3/web/portfolio_images?slug=meganhammett 的远程资源。（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

跨域请求被阻止：同源策略不允许读取位于https://api.glossgenius.com/v3/web/portfolio_images?slug=meganhammett 的远程资源。（原因：CORS 请求未成功）。

谁能协助 Nginx 我将如何解决这个特定问题？

这是我的配置，谢谢你的帮助。

 server {
    listen       80;
    server_name  www.studio21md.com studio21md.com;
    #charset koi8-r;
    #access_log  logs/host.access.log  main;

    location / {
        proxy_pass   https://meganhammett.glossgenius.com;
}

【问题讨论】：

标签： nginx cors

【解决方案1】：

请在 nginx 中使用此配置。

server {
        listen       80;
        server_name  www.studio21md.com studio21md.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
    
      location / {
        add_header 'Access-Control-Allow-Origin' 'https://api.glossgenius.com';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
    
        if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Allow-Origin' 'https://api.glossgenius.com';
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
          add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
          add_header 'Access-Control-Max-Age' 1728000;
          add_header 'Content-Type' 'text/plain charset=UTF-8';
          add_header 'Content-Length' 0;
          return 204;
        }
    proxy_pass   https://meganhammett.glossgenius.com;
proxy_redirect off;
proxy_set_header host $host;
proxy_set_header X-real-ip $remote_addr;
proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
    }
    }

【讨论】：

studio21md.com/portfolio - 现在它只是一个白页？为什么会这样？
proxy_set_header 主机 $host; - 删除该行可以解决该页面，但不能解决 API 请求上的上述问题。

【解决方案2】：

据我了解，您无权访问 api.glossgenius 的后端，而您是从 javascript 调用它。

我会尝试从您的后端调用该glossgenius api。并制作端点，以便您的前端调用您的后端。据我了解，您的前端调用后端没有 cors 问题。

【讨论】：

为什么是负面评价？