自学内容网 自学内容网

如何实现跨域

目录

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


原文地址:https://blog.csdn.net/xing_jian1/article/details/140277647

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!