小编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 …

我正在Angular 2和Laravel 5.4中构建我的应用程序.Angular2用于客户端,laravel 5.4用于服务器端.我在laravel中创建了API并从Angular2请求了这些API.

在Laravel中,我配置了Oauth 2护照服务,该服务正在验证所有API.在每个API调用中,我发送到标题下方.

'内容类型','授权'

我如何用标题调用API的方式.

private headers = new Headers({'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('access_token') });


let body = JSON.stringify({ user_id, company_id });
            console.log(this.headers);
            this.http.post(this.BuyerCostSetting, body, {headers:this.headers} )
            .subscribe(
                response => {
                    console.log('here');
                    console.log(response);                  
                },
                error => {
                    console.log(error.text());
                }
            );

当我从Angular2点击此API时,它显示以下错误:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

两天以来我有一个问题。我想从我的用React-app创建的React应用程序的公用文件夹中读取本地JSON。

这是我的项目结构：

• 上市

  • 数据

    • mato.json（我的.JSON文件）

• src

  • 组件

    • App.js

为什么我将文件放在public文件夹中？如果我使用文件src夹中的文件构建项目，则我的文件将包含在main.js命令生成的文件中yarn build。

我想修改我的json文件，而不总是重建我的应用程序。

所以我不能使用像这样的代码：

import Data from './mato.json'

…要么：

export default { 'mydata' : 'content of mato.json'}
import data from 'mydata';

我试图获取我的.json文件，但“文件方案”与fetch()＆chrome 不兼容。

（Chrome错误：“ index.js：6 Fetch API无法加载file：/// D：/projects/data/mato.json。不支持URL方案“文件”。”）

这是我的获取代码：

fetch(`${process.env.PUBLIC_URL}/data/mato.json`)
.then((r) => r.json())
.then((data) =>{
    ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root'));
})

仅适用于Firefox。我也试过mode: 'cors'不了。

当然，我没有任何服务器-这是一个本地项目-因此，如果有人知道如何在本地读取JSON文件，我将不胜感激。

所以我使用RiveScript的JavaScript 端口，它使用 ajax，当然我不想再使用 jQuery。只有一行 ajax，我想将其更改为新的 Fetch API。

**FYI: You can see the ajax code in line 1795 of the CDN.**

所以这是原始代码：

return $.ajax({
    url: file,
    dataType: "text",
    success: (function(_this) {
        return function(data, textStatus, xhr) {
            _this.say("Loading file " + file + " complete.");
            _this.parse(file, data, onError);
            delete _this._pending[loadCount][file];
            if (Object.keys(_this._pending[loadCount]).length === 0) {
                if (typeof onSuccess === "function") {
                    return onSuccess.call(void 0, loadCount);
                }
            }
        };
    })(this),
    error: (function(_this) {
        return function(xhr, textStatus, errorThrown) {
            _this.say("Ajax …

项目结构：

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',
],
/* …

所以我们使用 S3 存储桶，当尝试获取资源时，我在 Chrome 中得到：

Referrer Policy: strict-origin-when-cross-origin

我已经申请到S3桶：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

也适用于 CloudFront：

但仍然没有运气，继续出现下面的错误。我正在尝试基本上禁用 CORS 并允许任何来源。

谢谢。

我已经使用 Helmet 4.4.1 版本尝试过此操作，下面的两个版本都针对升级不安全请求 CSP 设置为 true

upgradeInsecureRequests: [] and upgradeInsecureRequests: ['true']

使用以上哪种格式是正确的？

我正在开发一个 iframeable 组件，现在偶然发现了一些看起来像是安全问题的问题。

我有两个网站：

• 站点 A，运行在 http://localhost:3002
• 站点 B，运行在 http://localhost:3000

站点 A 将站点 B 嵌入到 IFrame 中。站点 B 需要使用数据，而这些数据应该由站点 A 提供。但是，目前站点 B 只通过 URL 接受数据，并且由于原始 URL 可能需要身份验证，因此数据由站点 A 获取，并转换为对象 URL （与URL.createObjectURL）然后通过 提供给站点postMessageB。站点 B 现在应该从该 URL 获取数据并使用它。

然而，站点 B 获取对象 URL 被浏览器阻止：

• 铬合金：Not allowed to load local resource: blob:http://localhost:3002/<UUID>
• 火狐浏览器：Security Error: Content at http://localhost:3000/... may not load data from blob:http://localhost:3002/<UUID>

据我所知，这些消息与 CSP 或 CORS 没有关联。但是，我无法理解问题是什么以及它是否可以修复 - 我一直认为对象 URL 目前不存在任何跨站点问题，这正是使用它们的原因。

那么为什么会发生这种情况以及我能做什么呢？

昨天，我问了一个有关 CORS 错误的问题，当我尝试从 Angular 应用程序向 FastApi 后端发出 POST 请求时，遇到了该错误。经过一些评论后，我决定删除该问题以更好地重新检查一切。

所以事情有点奇怪。在我的 FastApi 后端中，我有以下功能：

@app.post("/hello")
def read_root(request: Request):
    print(request)
    client_host = request.client.host
    return {"client_host": client_host}

@app.post("/pattern-data")
def pattern_input(payload: PatternReconData) -> Dict:
    # Does stuff and falls over tragically
    return result   # this doesn't happen of course

在我的前端我正在尝试这两个：

    this.apiService.sendRequest('hello', 'howdy').subscribe(
      (response) => {
        console.log(response);
      },
      (error: any) => {
        console.log(error);
      },
      () => {
        console.log('done');
      }
    );
    this.apiService.sendRequest('pattern-data', payload).subscribe(
      (response: SuccessResponse) => {
        console.log(response);
        /* do stuff */
      },
      (error: any) => { …