javascript跨域问题排查

什么是跨域问题

• 跨域是指浏览器从一个域名的网页去请求另一个域名下的资源。出于安全考虑，浏览器会限制这种跨域请求。例如，网页http://example1.com中的 JavaScript 代码尝试去获取http://example2.com的数据，这就会触发跨域问题。
• 同源策略规定，只有当协议（如 http、https）、域名（如example.com）和端口（如 80、443）完全相同时，才允许访问资源。

排查步骤

• 检查请求 URL
  • 首先，确定发出请求的 JavaScript 代码中的 URL。查看请求的目标地址是否与当前页面的域名不同。例如，在一个使用fetch或XMLHttpRequest的函数中，仔细检查请求的 URL。
  • 示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://otherdomain.com/api/data');
xhr.send();

• 在这个例子中，很明显是跨域请求，因为请求的域名http://otherdomain.com与当前页面的域名不同。
• 查看服务器响应头
  • 检查服务器返回的响应头信息，特别是Access - Control - Allow - Origin字段。这个字段用于指定哪些域名可以访问该资源。
  • 如果服务器返回的Access - Control - Allow - Origin为*，则表示允许任何域名访问；如果是一个具体的域名，如http://allowed - domain.com，则只有这个域名下的网页可以访问。
  • 可以使用浏览器的开发者工具来查看响应头。在 Chrome 中，打开开发者工具，切换到 “Network” 选项卡，点击相应的请求，查看 “Response Headers” 部分。
• 检查 CORS 配置（服务器端）
  • 如果服务器没有正确配置 CORS（跨域资源共享），就会导致跨域问题。确保服务器在响应请求时，正确地设置了Access - Control - Allow - Origin、Access - Control - Allow - Methods（允许的请求方法，如 GET、POST 等）和Access - Control - Allow - Headers（允许的请求头）等字段。
  • 例如，在 Node.js 中使用 Express 框架，可以这样配置 CORS：

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// 或者可以自定义配置
app.use(cors({
    origin: 'http://allowed - domain.com',
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content - Type']
}));

 

 

• 当 JavaScript 发起跨域请求并且自定义请求头时，浏览器会更加严格地检查跨域策略。这是因为自定义请求头可能会携带敏感信息或者用于特殊的身份验证等操作。
• 根据同源策略和 CORS（跨域资源共享）规则，服务器需要明确允许这些自定义请求头才能成功进行跨域请求。

 

const headers = new Headers();
headers.append('Custom - Header', 'value');
fetch('https://cross - domain - url.com/api', {
    method: 'GET',
    headers: headers
});

或者在使用XMLHttpRequest时：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://cross - domain - url.com/api');
xhr.setRequestHeader('Custom - Header', 'value');
xhr.send();

• 确定自定义请求头的名称（如Custom - Header）和值（如value），并记录下来。
• 检查服务器响应头中的 CORS 配置
  • 使用浏览器的开发者工具，查看服务器返回的Access - Control - Allow - Headers响应头。这个头信息应该包含允许的请求头列表。
  • 如果服务器没有将自定义的请求头包含在Access - Control - Allow - Headers中，就会导致跨域问题。例如，服务器返回的Access - Control - Allow - Headers为Content - Type,Authorization，但你的自定义请求头是Custom - Header，这种情况下就会出现跨域错误。

检查服务器端代码（如果可访问）

• 如果可以访问服务器端代码，确保在服务器配置 CORS 时正确地处理了自定义请求头。
• 以 Node.js 和 Express 为例，使用cors模块可以这样配置：

• 这里将Custom - Header添加到了允许的请求头列表中，这样就可以正确处理带有该自定义请求头的跨域请求。
• 预检请求（OPTIONS）检查
  • 当自定义请求头存在时，浏览器可能会先发送一个预检请求（OPTIONS）来询问服务器是否允许该请求。检查服务器是否正确处理了预检请求。
  • 在预检请求的响应中，服务器应该返回Access - Control - Allow - Headers包含自定义请求头，同时还应该返回Access - Control - Allow - Methods包含实际请求（如 GET、POST 等）将要使用的方法，以及Access - Control - Allow - Origin允许请求的来源域名。
  • 例如，服务器对预检请求的响应头应该类似于：

Access - Control - Allow - Origin: http://your - origin - domain.com
Access - Control - Allow - Methods: GET,POST
Access - Control - Allow - Headers: Content - Type,Custom - Header