当前位置: 首页> 文旅> 酒店 > 前端面试题16(跨域问题)

前端面试题16(跨域问题)

时间:2025/7/11 14:28:51来源:https://blog.csdn.net/weixin_46730573/article/details/140223637 浏览次数:0次

在这里插入图片描述
跨域问题源于浏览器的同源策略(Same-origin policy),这一策略限制了来自不同源的“写”操作(比如更新、删除数据等),同时也限制了读操作。当一个网页尝试请求与自身来源不同的资源时,浏览器会阻止这种行为,以防止恶意网站读取另一个网站的数据。

解决前端跨域问题有多种方法,下面详细介绍几种常见的解决方案:

1. JSONP (JSON with Padding)

适用场景: 主要用于GET请求,且服务器支持JSONP响应。

原理: 利用<script>标签没有跨域限制的特点,网页可以加载来自不同源的JavaScript文件。服务器返回的不是JSON格式的数据,而是一个函数调用,这个函数的名字由请求时传递的参数指定。

示例代码:

  • 前端:
<script>function handleResponse(data) {console.log(data);}
</script>
<script src="http://example.com/data?callback=handleResponse"></script>
  • 后端 (假设使用Node.js和Express):
app.get('/data', function(req, res) {const data = { "key": "value" };const callback = req.query.callback;res.send(`${callback}(${JSON.stringify(data)})`);
});

2. CORS (Cross-Origin Resource Sharing)

适用场景: 现代Web应用广泛采用,支持各种HTTP方法。

原理: 通过在服务器端设置Access-Control-Allow-Origin响应头来允许特定源或者所有源访问资源。

服务器端设置示例 (假设使用Node.js和Express):

app.use(function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");next();
});

3. 使用代理服务器

适用场景: 开发环境中,尤其是前后端分离开发时。

原理: 设置一个代理服务器,前端的所有API请求都发送到这个代理,然后由代理转发到实际的API服务器,这样对于浏览器来说,请求都来自于同一个源。

配置示例 (使用Vue CLI的webpack配置):

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

4. 使用fetchXMLHttpRequest的CORS模式

虽然这不是一个独立的解决方案,但了解如何在JavaScript中利用CORS也很重要。默认情况下,现代浏览器的fetchXMLHttpRequest支持CORS,只需确保服务器正确设置了CORS头部。

示例代码 (使用fetch):

fetch('http://example.com/data', {mode: 'cors', // 默认就是cors,可以不写headers: {'Accept': 'application/json'}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

以上是解决前端跨域问题的几种常见方法,具体选择哪种方案取决于你的应用场景和技术栈。在生产环境中,CORS是最常用且推荐的方式,因为它提供了灵活的安全控制和良好的兼容性。

关键字:前端面试题16(跨域问题)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: