目录
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攻击),需要后端支持。
示例:前端通过动态创建`<script>`标签,设置其`src`属性为服务器地址并附加回调函数名作为参数,服务器返回类似`callbackFunction(data)`的字符串,前端定义`callbackFunction`函数处理返回的数据。
CORS (Cross-Origin Resource Sharing)
原理:通过服务器设置响应头中的`Access-Control-Allow-Origin`字段来指定允许哪些源访问资源,从而允许跨域请求。
优点:安全、灵活,支持所有HTTP方法。
缺点:需要后端支持,且可能涉及到预检请求等额外开销。
示例:后端服务器在响应头中添加`Access-Co