如何实现跨域

目录

JSONP (JSON with Padding)

CORS (Cross-Origin Resource Sharing)

Nginx代理

Node.js中间件代理

Vue axios实现（或其他前端HTTP库）

原生JS、jQuery Ajax等其他方式

跨域实现是Web开发中常见的需求，主要涉及到不同源（协议、域名、端口三者之一不同即为不同源）之间的资源共享问题。

实现跨域方案：服务器端运行跨域设置CORS等于 *；在单个接口使用注解 @CrossOrigin 运行跨域；使用 jsonp跨域。

JSONP (JSON with Padding)

原理：它是利用script标签的src连接可以访问不同源的特性，加载远程返回的“JS 函数”来执行的。
优点：简单，支持所有浏览器。
缺点：只能发送GET请求，存在安全隐患（如XSS攻击），需要后端支持。
示例：前端通过动态创建``标签，设置其`src`属性为服务器地址并附加回调函数名作为参数，服务器返回类似`callbackFunction(data)`的字符串，前端定义`callbackFunction`函数处理返回的数据。

CORS (Cross-Origin Resource Sharing)

原理：通过服务器设置响应头中的`Access-Control-Allow-Origin`字段来指定允许哪些源访问资源，从而允许跨域请求。
优点：安全、灵活，支持所有HTTP方法。
缺点：需要后端支持，且可能涉及到预检请求等额外开销。
示例：后端服务器在响应头中添加`Access-Co