小编sid*_*ker的帖子

我正在使用 React 和 Django 制作一个应用程序。当我使用 django 登录时，我在 cookie 中设置了令牌，但浏览器中未设置 Django 响应 cookie。我试图努力调试它但不能。不知道我哪里做错了。

Request URL:http://localhost:8000/login/
Request Method:POST
Status Code:200 OK
Remote Address:127.0.0.1:8000

Response Headers
    Access-Control-Allow-Credentials:true
    Access-Control-Allow-Origin:http://localhost:3000
    Content-Type:application/json
    Date:Sun, 12 Feb 2017 13:32:30 GMT
    Server:WSGIServer/0.1 Python/2.7.10
    Set-Cookie:token=97547ba32cb8abcfe81b28c47ee5e3b8087b54ac; Path=/
    Set-Cookie:sessionid=6twm2h9mad6q8k4w637ww25zt6l0ck2d; expires=Sun, 26-Feb-2017 13:32:30 GMT; httponly; Max-Age=1209600; Path=/
    Vary:Cookie
    X-Frame-Options:SAMEORIGIN

Request Headers
    Accept:application/json, text/plain, */*
    Accept-Encoding:gzip, deflate, br
    Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
    Authorization:Token undefined
    Connection:keep-alive
    Content-Length:41
    Content-Type:application/json;charset=UTF-8
    Host:localhost:8000
    Origin:http://localhost:3000
    Referer:http://localhost:3000/
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

客户请求代码

export function adminSignIn({username, …

我设法通过使用$ .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时没有.谢谢 !!

我正在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

我对微软登录进行HTTP POST请求以获取与邮件API一起使用的访问令牌,请求成功但代码转到我的代码的错误子句.

requestAccessToken(code: string)
{
console.log("request access token");
if (code) {
  var headers = new Headers();
  headers.append("Content-Type", 'application/x-www-form-urlencoded');
  headers.append('Accept', 'application/json');
  var requestoptions = new RequestOptions({
    headers: headers
  });
  var body = `grant_type=authorization_code&
              redirect_uri=http://localhost:4200&
              code=`+ code + `&
              client_id=4e[................]5ab&
              client_secret=CE[..............]BC`;

  this.http.post("https://login.microsoftonline.com/common/oauth2/v2.0/token", body, requestoptions).map((res: Response) =>
  {
    console.log("response given");
    const data = res.json();
  }).subscribe( (data) => {
     console.log("The data is = " + data); 
  }, error => { 
    console.log("The error is = " + error)
  });
}

浏览器控制台显示:XMLHttpRequest无法加载https://login.microsoftonline.com/common/oauth2/v2.0/token.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:4200 …

我正在尝试获取curl并从API获取JSON.

curl -XPOST -d "grant_type=password" -d "username=admin@admin.admin" \
    -d "password=admin" "web_app@localhost:8081/oauth/token"

当我在终端中使用curl时一切正常但是尝试使用fetch我得到底部提到的错误消息.

fetch("http://web_app@localhost:8081/oauth/token", {
        credentials: 'include',
        body: "grant_type=password&username=admin@admin.admin&password=admin",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        method: "POST"
    }

这是我得到的错误:

TypeError:http:// web_app @ localhost:8081/oauth/token是具有嵌入凭据的URL.

抓取我做错了吗？

两天以来我有一个问题。我想从我的用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 …

下面的代码引用和请求引用有注释，这些注释是在 SO 中添加的，以解释我对原始请求的理解，并且代码不包含注释。

我知道使用身份验证标头进行获取请求的标准。我需要做的是获取服务器A设置到服务器B的cookie，而不必通过javascript传递它。

我有服务器A： http: //127.0.0.1:8080 包含index.html

当 cookie jar 被查看时，index.html 包含一个 cookie

我还有服务器 B： http: //0.0.0.0:8081。<- 不知道相关端口和IP是否不同

http://127.0.0.1:8080/index.html发出以下请求

let url = "http://0.0.0.0:8081/write" //this url is o a different server so certain headers are needed

  let cookies = document.cookie
  console.log(cookies) //this logs the cookie so I know its defo there
  let otherPram= {
    credentials: 'include',   //this is what I need to tell the browser to include cookies
    method: "GET"

  };

  fetch(url, otherPram)

发出请求后，浏览器会对http://0.0.0.0:8081/write进行选项调用，并返回响应：

access-control-allow-credentials: true …

我用来superagent从我的 React Native 应用程序上传文件。它在 iOS 上运行得很好，但在 Android 上却出现了这个错误：

可能原因：网络离线、Access-Control-Allow-Origin不允许Origin、页面正在卸载等。

我在这里创建了一个最小的示例https://snack.expo.io/@twohill/upload-example并复制了下面的代码，以防零食消失：

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import * as DocumentPicker from 'expo-document-picker';
import superagent from 'superagent';

import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

const upload = (file, setMessage) => {
  const { name } = file;

  superagent.post('https://example.org/uploads') // <-- change this URL to your server that accepts uploads and …

我正在使用其公共 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, …