小编sid*_*ker的帖子

我设法通过使用$ .getJSON从闪烁提要api获取json响应,但是当我尝试使用Fetch时,我似乎只获得了XML响应.

这有效:

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON(flickerAPI, {
                    tags: "searchTerm",
                    tagmode: "any",
                    format: "json"
                })
                .done(function (data) {
                   //....
                });

这不起作用:

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

var request = new Request(flickerAPI, { 
                mode: 'no-cors',
                tags: 'searchTerm',
                tagmode: 'any',
                format: 'json'
            });

            fetch(request)
                .then(function (res) {
                    return res.json();
                })
                .then(function (text) {
                    console.log(text);
                });

我还想了解为什么在使用Fetch API时我得到:"请求资源上没有'Access-Control-Allow-Origin'标头.因此不允许原点'null'访问.如果提供不透明的响应您的需求,将请求的模式设置为'no-cors'以获取禁用CORS的资源." 并且当使用$ .getJSON时没有.谢谢 !!

在客户端浏览器中使用 fetch api，我没有遇到 GET 或 POST 问题，但是我遇到了 fetch 和 DELETE 问题。它似乎将 DELETE 请求方法更改为 OPTIONS。

大多数研究表明是 cors 问题，但对我来说，我已经涵盖了 cors 问题。

我不确定这是否是有效的 fetch spec api 链接，但它显示：

上市方法的CORS安全是一个方法GET，HEAD或POST。

我不确定这是否意味着我不能在使用 cors 获取时使用 DELETE，这就是我遇到问题的原因？

浏览器代码：

var request =
          new Request(url, {
            credentials: 'include',
            mode: 'cors',
            method: 'DELETE'
          });

        return fetch(request)
          .then(this.fetchError.bind(this))
          .then(this.json)
          .then((response)=> {
            this.set(`uploadState.${index}.value`, false);
          })
          .catch((e) => {
            console.log(e);
          });
      },

chrome 网络标签：

Request URL:http://72.12.4.3:9000/api/v1/listings/3/47/image-3-47-1492565415145.jpeg
Request Method:OPTIONS
Status Code:401 Unauthorized
Remote Address:72.12.4.3:9000

Response Headers
view …

我在不同的域上有两个网络应用程序。

1. 网页应用程序1
2. 网页应用程序2

我的最终目标如下。

我找到了在 Asp.net MVC - 5 中使用 Google 帐户 API 登录的教程。

https://tutorialslink.com/Articles/How-to-login-with-Google-account-API-in-Aspnet-MVC---5/18

通过使用相同的概念，我尝试做以下事情

1. 从 WebApp1 打开 WebApp2

2. 从 WebApp2 应用事件重定向到指定的 URL，其中包含 URL + 加密格式的所需数据。

3. 从 WebApp1 不断检查更新的 URL 并相应地在 WebAp1 上显示数据。

4. 关闭 Web 应用程序2。

为了实现上述步骤，我的源代码（WebApp1）如下。

var REDIRECT = "http://localhost/Home/Test";
var webApp2 = window.open("WebApp2Url", "CrossDomain", '', true);

var pollTimer = window.setInterval(function () {
try {
    if (webApp2.document.URL.indexOf(REDIRECT) != -1) {
    window.clearInterval(pollTimer);
    // logic to retrieve data from webApp2.document.URL
    webApp2.close();
    debugger;
    }
}
catch (e) {
}
}, 500); …

我正在使用其公共 api 访问 NASA 图片，但收到此错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at\n[nasa api website] (Reason: CORS header \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\x99 missing).\n

但是当我检查他们的响应头时， \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\x99 存在并设置为 \'*\'，在这里你可以看到它：

响应标头：

Access-Control-Allow-Origin *\nAge 0\nCache-Control   max-age=0, private, must-revalidate\nContent-Encoding    gzip\nContent-Type    application/json; charset=utf-8\nDate    Sat, 28 Mar 2020 14:37:13 GMT\nEtag    W/"e26hidden..."\nReferrer-Policy strict-origin-when-cross-origin\nServer  openresty\nStrict-Transport-Security   max-age=31536000; includeSubDomains\nVary    Origin\nVia https/1.1 api-umbrella (ApacheTrafficServer [cMsSf ]), 1.1 vegur\nX-Cache MISS\nX-Content-Type-Options  nosniff\nX-Download-Options  noopen\nX-Frame-Options SAMEORIGIN\nX-Permitted-Cross-Domain-Policies   none\nX-RateLimit-Limit   1000\nX-RateLimit-Remaining   999\nX-Request-Id    00c8c415-37ad-474b-bfbd-8e968d60f37f\nX-Runtime   0.125778\nX-Xss-Protection    1; mode=block\n

请求标头：

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8\nAccept-Encoding gzip, deflate, …

我构建了一个 FastAPI 应用程序和一个在直接打开时可以工作的索引、css 和 js 文件，但是在使用 FastAPI 提供服务时我无法显示 css 文件。如果问题是 CORS 问题，我已尝试进行故障排除，我已尝试重新排列文件以使其位于相同或不同的目录中（并相应地重新指定 href 路径），但没有任何效果。这是我此时的目录：

working_directory
??? app
|__ index.html
    ??? style.css
    ??? main.js

像这样设置应用程序主页路线：

file_path = "index.html"

@app.get("/")
async def home():
    return FileResponse(file_path)

我是否还需要在 file_path 变量中提供 css 文件的路径？到目前为止，我尝试过的格式还没有奏效，并且 FastAPI 的错误没有像 Flask 或 Django 那样记录得很好，例如。

我的错误如下： GET http://localhost:8000/style.css net::ERR_ABORTED 404 (Not Found)

我如何让网络应用程序识别我的 style.css 文件？

我是 CORS 配置的新手并试图解决这个问题，但根据文档，我的设置看起来是正确的。我希望你能帮我看看我错过了什么。我的代码正在尝试PUT使用签名 url将 ( ) 文件直接上传到谷歌存储。

访问 XMLHttpRequest ' https://storage.googleapis.com/herdboss-dev.appspot.com/uploads/152/152-owner-152-61.jpg?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Go ...' 来自 ' https://herdboss-dev.appspot.com ' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。

我已经在我的 Google 存储桶上设置了 CORS 策略（为了可读性添加了换行符）：

% gsutil cors get gs://herdboss-dev.appspot.com               
[{
"maxAgeSeconds": 3600, 
"method": ["GET", "HEAD", "PUT"], 
"origin": ["https://herdboss-dev.appspot.com"], 
"responseHeader": ["X-Requested-With", "Access-Control-Allow-Origin", "Content-Type"]
}]

根据我的 chrome 检查员，飞行前请求发生并返回正确的方法和标题（据我所知）。另外，作为旁注，我注意到 PUT 在 OPTIONS 之前出现在我的 Chrome 检查器中，但时间戳显示 OPTIONS 是最先发送的。

当OPTIONS调用发生时，Google Storage 会正确响应并表示它可以支持我的请求方法GET, HEAD, PUT和来源https://herdboss-dev.appspot.com：

放置请求

但是，当PUT发生这种情况时，Google Storage 不会以正确的Access-Control-Allow-Origin标头响应：

我错过了什么或做错了什么？PUT当我进行直接 …

我正在使用 Netlify 来提供一些静态.json文件。它们在浏览器中加载良好，但是当我尝试通过 javascript 获取它们时，我在控制台中收到以下错误：

从源“http://localhost:3000”获取（重定向自）的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我在 Netlify 仪表板中检查了我网站设置中的所有选项，但没有看到任何启用 CORS 的选项，怎么做？

我们的网站是在 apache 服务器上使用 laravel 7 创建的。我们有一个具有 3 个不同子域的应用程序。例如：

mainwebsite.com

products.mainwebsite.com

customers.mainwebsites.com

suppliers.mainwebsite.com

子域已这样设置：

Route::domain('supplier.mainwebsite.com')->group(function () {
      Route::get('/dashboard', 'ExampleController@show')->name('example-show')->middleware('auth','isActive','role:supplier|admin|producer');
});

我们使用 spatie 权限包来检查角色。

现在的问题是身份验证。如果用户登录到 sellers.mainwebsite.com，当他们访问 mainwebsite.com 时，他们应该再次登录。我们希望他们在所有子域中登录。因为有些页面相似，但根据用户的角色显示不同的内容。例如，仪表板位于 mainwebsite.com/dashboard 中，但如果您已登录到 sellers.mainwebsite，并且有一个转到仪表板的链接，该链接会转到 mainwebsite.com.dashboard，因为子域不同，他们应该再次登录。我们希望他们保持登录状态。

我感谢您的帮助。

问候，

项目结构：

2个文件夹，即apiand client，其中 api 用于 laravel 安装，client 指的是 nuxt 项目。

Laravel (v-8.00) 设置：

这是我在.env文件中的会话变量

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=127.0.0.1
SANCTUM_STATEFUL_DOMAINS=127.0.0.1:3000

cors.php 包含以下内容

'paths' => [
    'api/*',
    'login',
    'logout',
    'sanctum/csrf-cookie'
],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => false,

'max_age' => true,

'supports_credentials' => true,

没有sanctum.php对它进行任何更改，它包含

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1,127.0.0.1:8000,::1')),

Nuxt 设置

.env 文件包含：

PORT=3000
HOST=127.0.0.1
BASE_URL=http://127.0.0.1:3000
API_URL=http://127.0.0.1:8000

nuxt.config.js 包含：

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
    '@nuxtjs/pwa',
    '@nuxtjs/dotenv',
],
/* …

我在 Go 中设置了一个非常基本的服务器

fs := http.FileServer(http.Dir("./public"))
 http.Handle("/",fs)

但问题是：我希望人们使用fetch(). 然而，由于设置了 CORS，这是不可能的。

Access to fetch 'xxxxx' from origin 'null' has
been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch 
the resource with CORS disabled.

我需要找到一种方法来传入标头Access-Control-Allow-Origin:*，但我不知道如何使用http.Handleor http.FileServer, only http.HandleFunc。

我无法使用，http.HandleFunc因为据我所知，它不允许我提供文件，而且我宁愿不使用文件处理系统自己获取文件（我可能必须将其作为最后的手段，除非有另一个方法）方式）。另外，它的效率很低。为什么要重新发明轮子，尤其是当这个轮子比我能想出的更好的时候？

有什么方法可以发送标头吗http.Handle()？

我对 Go 还很陌生，我已经有一段时间没有做过静态类型语言了，也没有做过处理传入 URL 的语言（我主要使用 PHP，所以......），所以我可能有也可能没有一个好的对概念的把握。