解决跨域问题：CORS、JSONP和代理服务器

最新推荐文章于 2025-07-09 18:19:41 发布

原创最新推荐文章于 2025-07-09 18:19:41 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

引言

跨域资源共享（CORS, Cross-Origin Resource Sharing）是指在浏览器中，一个网页的脚本尝试访问不同源（协议、域名或端口不同）的资源时，浏览器会阻止这种访问，出于安全考虑。解决跨域问题是Web开发中常见的需求。

跨域的原因

浏览器的同源策略（Same-Origin Policy）限制了一个源的文档或脚本如何与另一个源的资源进行交互，以防止恶意网站读取另一个网站的数据。

解决跨域问题的方法

1. 服务器端设置CORS

服务器端通过设置响应头来允许特定的源访问资源。

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

Access-Control-Allow-Origin：指定允许访问的源。
Access-Control-Allow-Methods：指定允许的HTTP方法。
Access-Control-Allow-Headers：指定允许的请求头。

2. JSONP（仅限GET请求）

JSONP是一种通过<script>标签绕过同源策略的方法，但它仅支持GET请求。

<script>
function handleResponse(response) {
console.log('Response:', response);
}
</script>
<script src="http://example.com/api/data?callback=handleResponse"></script>

3. 代理服务器

在前端项目中设置一个代理服务器，前端请求代理服务器，代理服务器再请求目标服务器，从而绕过跨域限制。

使用webpack-dev-server的代理功能

在vue.config.js中配置代理：

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};