相关疑难解决方法(0)

我正在运行一个简单的 API 请求，将数据返回到我编写的一个简单的 API 搜索中。我说这是简单的 API 调用，因为不需要身份验证，我可以非常简单地在 python 中完成。

但是，我在 React 中使用 Axios 时遇到了问题。

代码：

 axios.get('https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d')

我试过看这里，每个人都让它听起来很简单，但我似乎什么也做不了。我试过了。

axios.get('https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d', { crossDomain: true })

和

axios.get('https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d, {
        headers: {
          'Access-Control-Allow-Origin': true,
        },
        })

但我不断收到类似的错误 Access to XMLHttpRequest at 'https://www.keyforgegame.com/api/decks/59554ab7-b414-4220-8514-408a0dbf572d' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

或者

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我是否需要在标题中放一些东西才能完成这项工作？或者这是我需要做出反应的某种设置。

帮助！

背景

(如果您熟悉CORS,最后可以跳到问题)

CORS [1]是一种允许浏览器允许访问来自不同域的资源的解决方案.例如,使用AJAX的REST数据后端.

在互联网上很好地观察到Chrome(和Webkit好友)在这样的资源需要时不处理HTTP身份验证提示.例如[2](这是为了防止浏览器显示auth登录对话框,例如,当图像标签加载失败并且需要凭据时,Web-Mail登录页面.用户可能被欺骗进入他们的网络邮件凭据)

Chrome在这种情况下的行为是放弃响应,几乎无声地取消请求.

事实上,如果发生200,Chrome只会正常通过响应; 吞下任何其他状态代码并中止AJAX调用.

如果使用jQuery执行Ajax请求,并且远程站点使用HTTP 401状态代码进行响应,则取消请求并且ajax完成并出现错误,但缺少401代码.好像连接死了或等同的下层问题.

我见过的唯一一个提到CORS这个警告的网站是[1]

浏览器在报告错误时没有很好地报告出错的地方.例如,Firefox报告所有错误的状态为0和空状态文本.浏览器还会向控制台日志报告错误消息,但无法从JavaScript访问此消息.处理错误时,您将知道发生了错误,但没有其他错误.

您可以通过使用chrome启动标志来禁用此安全性 - 只是为了测试后端是否正常运行,并且一个健全状态不会因丢失正确的状态代码而受到不适当的影响.见[2]

问题

如果后端和前端客户端代码应该使用401作为其身份验证过程的一部分,该怎么办？ - 任何失败只会被误导成一个"错误"输出.

例如:在发出身份验证请求时 - 例如,双腿OAuth令牌请求 - 对使用正确状态代码的RESTful后端 - 客户端不知道是否:

• 401用户未经过身份验证.
• ---连接失败.
• 400有一个糟糕的要求.
• 500服务器有问题.
• 207成功后没有内容.

我们的后端写得相当 RESTful,遵循当时认为具有成本效益的最佳实践; 其中一个依赖于正确的HTTP状态代码.我们反对的Java REST客户端运行良好.

现在我已经开始创建一个Javascript客户端,用于嵌入网页 - 特别是使用CORS,我们已经解决了Chrome等问题.(注意Firefox 似乎很好,我们目前通常不关心IE.)

题

人们为解决这些问题做了什么？
有什么办法可以使CORS更适合可信赖的后端吗？

链接

1. CORS教程:http://www.html5rocks.com/en/tutorials/cors/
2. Chrome不允许使用401触发的身份验证提示:http://code.google.com/p/chromium/issues/detail？id = 81251
3. - Chrome的禁用网络安全:在Chrome中禁用相同的来源政策

我正在尝试进行必要的三方授权,以便在浏览器中调用Twitter API.该过程从通过POST签名请求获取请求令牌开始/oauth/request_token(这也是Twitter开始的登录方式).

我的问题是,在浏览器POST到Twitter API端点之前,它想要使用OPTIONS方法预检请求.此预检请求始终返回状态400(错误请求).

下面是一个示例,您可以将其剪切并粘贴到支持Fetch API的浏览器控制台中:

fetch('https://api.twitter.com/oauth/request_token', { method: 'POST', mode: 'cors', headers: new Headers({ authorization: 'xxx' }), body: 'oauth_callback=http%3A%2F%2Flocalhost%2F' });

在Chrome上,预检请求如下所示(Firefox类似):

OPTIONS /oauth/request_token HTTP/1.1
accept:*/*
accept-encoding:gzip, deflate, sdch
accept-language:en-US,en;q=0.8
access-control-request-headers:authorization, content-type
access-control-request-method:POST
cache-control:no-cache
origin:null
pragma:no-cache
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

预检反应如下:

HTTP/1.1 400 Bad Request
content-length: 0
date: Tue, 08 Mar 2016 22:21:37 GMT
server: tsa_a
x-connection-hash: 529e3d8338caeb980077637d86db5df1

请注意,问题不在于我没有在上面的示例中指定真正的授权标头.授权标头的值未在预检请求中使用. …

我知道之前已经问过这个问题,但没有一个答案对我有用!我正在做一个学校项目,我想得到学校服务器上动态调度文件返回的HTML(解析我的项目).

我想要HTML的页面是:https://telaris.wlu.ca/ssb_prod/bwckschd.p_disp_dyn_sched

我认为没有为学校服务器文件启用CORS,我不知道它是否支持JSONP ...

如何设置跨域请求以从此页面获取HTML？

我试过了:

$.ajax({
    type:'POST',
    url: 'https://telaris.wlu.ca/ssb_prod/bwckschd.p_disp_dyn_sched',
    headers: {
      'Access-Control-Allow-Origin': '*'
   },
   contentType: 'text/html',
   crossDomain:true
}).done(function( data ) {

});

我收到错误:

XMLHttpRequest无法加载 https://telaris.wlu.ca/ssb_prod/bwckschd.p_disp_dyn_sched.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问.响应具有HTTP状态代码501.

当我添加:

dataType:'jsonp'

我收到错误:

获取 https://telaris.wlu.ca/ssb_prod/bwckschd.p_disp_dyn_sched?callback=jQuery21108736664191819727_1416964243449&_=1416964243450 400(错误请求)jquery.min.js:4send jquery.min.js:4n.extend.ajax jquery.min.js :4(匿名函数)

任何帮助是极大的赞赏!

getStaticProps正在对有效的 API进行网络调用superhero.com，但当我尝试在其中进行相同的操作时useEffect，会抛出 CORS 错误。

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

我尝试过使用fetch和axios进行网络调用，但遇到了相同的错误。问题或限制是否出在 Next.js 上？

编辑：尝试使用JSON 占位符API useEffect，它正在工作。

我有一个API,它将base64字符串转换为图像并在Tomcat Server中写入图像.图像在调用API后成功写入,但在检索相同图像时出现错误:

"请求资源上没有'Access-Control-Allow-Origin'标头.因此不允许访问Origin.XMLHttpRequest无法加载http:// hostname:4444 // tmpFiles/31487660124865.jpg.没有'访问控制 - Allow-Origin'标头出现在请求的资源上.

我的代码如下:

public Message uploadImage(Map<String, String> map) {

    // Initializing the message
    Message message = new Message();

    try {

        // Get the file data
        String fileData = map.get("file_data");

        // Split the data with the comma
        String base64Image = fileData.split(",")[1];

        // Convert the base64 input to binary
        byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(base64Image);

        BufferedImage image = ImageIO.read(new ByteArrayInputStream(imageBytes));

        // Manipulations in File Name
        String fileName = map.get("file_name");
        String file = fileName.substring(0, fileName.indexOf(".")); …

我正在开发一个应用程序，在该应用程序中我使用 package.json 发出“http”请求import 'package:http/http.dart' as http;。当我使用它时，此请求工作正常Android，iOS但在Fultter Web我遇到CORS Policy问题时。

代码

Future<Details> verification(String id) async {
  final http.Response response = await http
      .post(
        'https://secure.iccrc-crcic.ca/search/do/lang/en',
        headers: <String, String>{
          'Content-Type': 'application/x-www-form-urlencoded',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'POST,GET,DELETE,PUT,OPTIONS',
          'Accept': '*/*'
        },
        body:
            "form_fields=%20lang%3Den%26search_last_name%3D%26search_first_name%3D%26search_iccrc_number%3D$id%26search_membership_status%3D1%26search_company_name%3D%26search_agent%3D%26search_country%3D%26search_province%3D%26search_postal_code%3D%26search_city%3D%26search_street%3D&query=%20&letter=%20&start=%200",
      )
      .timeout(Duration(minutes: 1));

  if (response.statusCode == 200) {
    return verificationEmail(response.body);
  } else {
    throw Exception('Failed to create album.');
  }
}

错误

Access to XMLHttpRequest at 'https://secure.iccrc-crcic.ca/search/do/lang/en' 
from origin 'https://immigration-101.web.app' has been blocked by CORS …

我尝试使用Angular的HttpClient发送带有授权标头的请求,但标头未成功设置.

在这里我的代码.

import {HttpClient, HttpHeaders} from '@angular/common/http';


constructor(private http: HttpClient,
            private auth: AuthService) {
}

sendRequest() {
  this.http.get(this.url, {
    headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.auth.getAccessToken())
  }).subscribe(
    data => {
      console.log(data);
    },
    error => {
      console.log(error);
    }
  );
}

这里是网络调试头源.

OPTIONS /userinfo HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Referer: http://localhost:4200/user
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.8,en;q=0.6

响应头如下.

HTTP/1.1 400 …

在我的 Flutter-Web 应用程序中，我试图使用 flutter_google_places 包获取地址。我正在尝试使用简单的代码来获取自动完成地址字段（MyTextField 只是一个自定义的文本字段）：

final addressField = MyTextField(
  controller: _addressController,
  labelText: 'Indirizzo',
  readOnly: true,
  onTap: () async {
    await PlacesAutocomplete.show(
      context: context,
      apiKey: kGoogleApiKey,
      mode: Mode.overlay,
      onError: (error){print('ERROR: $error');},
    );
  },
);

当我运行应用程序并向该字段插入一些内容时，我没有得到任何结果。但是我收到此错误（从主机上的检查控制台捕获，并且我在本地也收到相同的错误）：

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=h&key=**MY-API-KEY**' from origin 'https://**MY-HOSTING**.firebaseapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我读到这是一个服务器端问题，我尝试像这样修改 firebase.json：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ], …

我有一个 Android、Ios 和 Web 应用程序，使用 php 作为后端。所有 Api 在 android 和 ios 中都工作正常，但在 web 中抛出 CORS 错误。出现这样的错误

从源“http://localhost:49168”访问“https://example.com/api”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我尝试发送标头： {'Access-Control-Allow-Origin': 'http://localhost:49168', "Origin": "http://localhost:49168" } 到 http 请求。如果我为 chrome 添加 CORS 扩展，网络将运行顺利。请帮帮我