前端面试题16（跨域问题）

跨域问题源于欣赏器的同源计谋（Same-origin policy），这一计谋限制了来自不同源的“写”操作（比如更新、删除数据等），同时也限制了读操作。当一个网页尝试哀求与自身来源不同的资源时，欣赏器会制止这种行为，以防止恶意网站读取另一个网站的数据。
解决前端跨域问题有多种方法，下面具体先容几种常见的解决方案：
1. JSONP (JSON with Padding)

实用场景: 重要用于GET哀求，且服务器支持JSONP响应。
原理: 利用<script>标签没有跨域限制的特点，网页可以加载来自不同源的JavaScript文件。服务器返回的不是JSON格式的数据，而是一个函数调用，这个函数的名字由哀求时传递的参数指定。
示例代码:

• 前端:
  

1. <script>
2.     function handleResponse(data) {
3.         console.log(data);
4.     }
5. </script>
6. <script src="http://example.com/data?callback=handleResponse"></script>

复制代码

• 后端 (假设使用Node.js和Express):
  

1. app.get('/data', function(req, res) {
2.     const data = { "key": "value" };
3.     const callback = req.query.callback;
4.     res.send(`${callback}(${JSON.stringify(data)})`);
5. });

复制代码

2. CORS (Cross-Origin Resource Sharing)

实用场景: 现代Web应用广泛接纳，支持各种HTTP方法。
原理: 通过在服务器端设置Access-Control-Allow-Origin响应头来答应特定源或者全部源访问资源。
服务器端设置示例 (假设使用Node.js和Express):

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

复制代码

3. 使用代理服务器

实用场景: 开辟情况中，尤其是前后端分离开辟时。
原理: 设置一个代理服务器，前端的全部API哀求都发送到这个代理，然后由代理转发到现实的API服务器，这样对于欣赏器来说，哀求都来自于同一个源。
设置示例 (使用Vue CLI的webpack设置):

1. // vue.config.js
2. module.exports = {
3.   devServer: {
4.     proxy: {
5.       '/api': {
6.         target: 'http://backend.example.com',
7.         changeOrigin: true,
8.         pathRewrite: {'^/api': ''},
9.       },
10.     },
11.   },
12. };

复制代码

4. 使用fetch或XMLHttpRequest的CORS模式

虽然这不是一个独立的解决方案，但相识怎样在JavaScript中利用CORS也很重要。默认情况下，现代欣赏器的fetch和XMLHttpRequest支持CORS，只需确保服务器正确设置了CORS头部。
示例代码 (使用fetch):

1. fetch('http://example.com/data', {
2.   mode: 'cors', // 默认就是cors，可以不写
3.   headers: {
4.     'Accept': 'application/json'
5.   }
6. })
7. .then(response => response.json())
8. .then(data => console.log(data))
9. .catch(error => console.error('Error:', error));

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。