web前端跨域问题简介及其常见解决方案

最新推荐文章于 2025-04-21 18:22:48 发布

AkagiSenpai

最新推荐文章于 2025-04-21 18:22:48 发布

阅读量1.1k

点赞数 1

分类专栏：前后端杂记文章标签： web jsonp ajax javascript xmlhttprequest

本文链接：https://blog.youkuaiyun.com/weixin_44176696/article/details/107599850

版权

本文介绍了Web前端的跨域问题及其原因，详细解释了同源策略的两个主要防护点：防止非同源请求和DOM元素读取。探讨了三种常见的跨域解决方案：JSONP、CORS策略和代理，并提供了相应的示例。文章旨在帮助开发者理解并解决跨域访问的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近在做一个小web项目，需要从一个接口获取XML数据，具体数据用浏览器可以直接打开，大概长这样：
在这里插入图片描述
其实就是一些球赛的数据。。。然后神奇的是，当我在自己的站点尝试用ajax去获取数据的时候，竟然有如下的报错信息：

Access to XMLHttpRequest at 'http://free.win007.com/vbsxml/change.xml’from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

在这里插入图片描述

翻译一下就是咱的ajax请求，被【CORS规范】给拦截了，百度了一通发现是跨域了。什么是跨域？为啥不能跨域？图个啥？那么为了解决这个问题，需要搞懂跨域是什么，于是记录下来这篇文章。。。

跨域问题简介

一句话：用户当前正在访问页面A，页面A的JavaScript代码向页面B发送请求，当页面AB的 域名（或子域名），端口号，协议（http or https） 中任意一个不同，即构成跨域请求。

比如

域名不同构成跨域
http://www.baidu.com
http://www.taobao.com

协议不同构成跨域
http://www.baidu.com
https://www.baidu.com

端口不同构成跨域
http://localhost:114
http://localhost:514

我们通过一个简单的栗子尝试一下跨域请求：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://free.win007.com/vbsxml/change.xml");
xhr.onreadystatechange = function() {
   
	if(xhr.readyState==4 && xhr.status==200) {
   
		console.log(xhr.responseXML);
	}
}
xhr.send();