[已解决] CORS 请求的 URL 方案必须为 "http" 或 "https" - Javascript

问题描述

在进行跨域请求时，出现了如下错误：

Access to XMLHttpRequest at 'http://example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: CORS request URL scheme must be "http" or "https", for example "http://example.com". 

错误提示表明，跨域请求的 URL 方案必须为 "http" 或 "https"，而非其他的协议。

解决方案

这是由于浏览器的 CORS（跨域资源共享）策略 导致的。CORS 是一种安全机制，它限制了网站的跨域请求。

在进行跨域请求时，需要进行以下几个步骤：

1. 发送预检请求（OPTIONS 请求），以检查服务端是否允许跨域请求。
2. 服务端进行跨域请求的验证，返回符合 CORS 要求的响应头。
3. 浏览器接收到响应头之后，再发送真正的跨域请求。

在这个过程中，请求的 URL 方案必须为 "http" 或 "https"。

在 Javascript 中，我们可以使用 XMLHttpRequest 或 fetch 来进行跨域请求。发送请求之前，我们需要为请求设置相应的参数。

可以使用如下的方式，正确设置跨域请求的 URL 方案。

const url = 'http://example.com';
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.withCredentials = true; // 携带身份凭证，以进行跨域 cookies 传递
xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
xhr.send();

fetch('http://example.com', {
  method: 'GET',
  credentials: 'include', // 携带身份凭证，以进行跨域 cookies 传递
  headers: {
    'Content-Type': 'application/json', // 设置请求头
  },
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

通过这样的设置，可以正确进行跨域请求，并解决跨域请求的 URL 方案必须为 "http" 或 "https" 的问题。

总结

当进行跨域请求时，需要根据浏览器的 CORS 策略进行设置。正确设置请求头、携带身份凭证等参数，可以帮助我们解决跨域请求的 URL 方案必须为 "http" 或 "https" 的问题。