跨域在前端开发中是一个常见的问题，特别是在使用前后端分离的架构时。本文将介绍一些常见的跨域解决方案及标签拼接方法。
什么是跨域
跨域是指在浏览器使用不同源（protocol、domain、port）之间进行网络请求时产生的安全限制。出于安全考虑，浏览器会限制跨域请求的默认行为。
JSONP
JSONP（JSON with Padding）是一种解决跨域问题的方法。它通过动态创建 <script> 标签来加载跨域的 JavaScript 资源，然后将数据包裹在一个函数调用中返回给页面。
function handleResponse(data) {
// 处理返回的数据
}
var script = document.createElement('script');
script.src = 'http://example.com/api/data?callback=handleResponse';
document.body.appendChild(script);
在服务端，接收到请求后，返回一个回调函数调用的 JavaScript 代码，例如：
handleResponse({ foo: 'bar' });
虽然 JSONP 具有一定的局限性，比如只能进行 GET 请求，但它在一些特定情况下仍然是有效的解决跨域问题的方法。
CORS
CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种新的跨域解决方案，它允许服务器在响应中添加一个头部信息，告诉浏览器该资源是否被允许跨域访问。
在服务端，可以通过设置响应头来允许跨域访问：
Access-Control-Allow-Origin: http://example.com
这表示只有指定的域名（http://example.com）可以访问该资源。
在前端，可以直接发送跨域请求并处理响应：
fetch('http://example.com/api/data')
.then(response => response.json())
.then(data => {
// 处理返回的数据
});
代理服务器
代理服务器是在客户端和服务端之间添加一个中间层，用于转发请求和响应。前端在发起网络请求时，实际请求的是代理服务器，然后代理服务器再将请求转发给服务端。
代理服务器常用于解决跨域问题，前端只需将请求发送给代理服务器的地址即可。
以下是一个使用 Express 框架搭建的简单代理服务器示例：
const express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();
app.use('/api', proxy({
target: 'http://example.com',
changeOrigin: true
}));
app.listen(3000, () => {
console.log('Proxy server started on port 3000');
});
在前端，只需将请求的地址指定为代理服务器的地址即可：
fetch('/api/data')
.then(response => response.json())
.then(data => {
// 处理返回的数据
});
标签拼接方法
除了通过 JavaScript 发起网络请求外，还可以通过标签的方式来实现跨域。
常见的标签拼接方法有：
<img>标签：可以通过拼接<img>标签的src属性来发送 GET 请求，服务器返回的内容会被当作图片显示在页面上。<script>标签：类似于 JSONP 的原理，可以通过动态创建<script>标签来加载跨域的 JavaScript 资源。<link>标签：可以通过拼接<link>标签的href属性来加载 CSS 文件，服务器返回的内容会被当作样式应用到页面上。
这些标签拼接方式在某些情况下是非常有用的，但也存在一些局限性，比如只能进行 GET 请求，且无法通过编程的方式获取返回的数据。
结语
本文介绍了一些常见的前端开发中的跨域解决方案及相关标签拼接方法。根据不同的需求和场景，可以选择适合的解决方案来解决跨域问题。在实际开发时，需要综合考虑安全性、兼容性和性能等因素，选择最适合的跨域解决方案。
本文来自极简博客，作者：开发者故事集，转载请注明原文链接：前端开发中的跨域解决方案及相关标签拼接方法
