如何解决ajax跨域问题

Posted 2023-04-28

参考技术A

JSONP步骤：

前端通过JS，动态创建一个script标签

前端利用script的src，实现不同域后台数据的申请（简言之就是将src的属性值设置为其它域中的XX.php等文件路径）

前端将需要给后台传递的数据放置在URL串中，还需要将“申请到数据后”想要运行的功能函数“作为参数”传递给后台

代码案例：

tips：

src属性的值改成你要请求的其它域名的地址

如何解决前端跨域问题？

参考技术A 可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。
如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。 参考技术B 这个前端跨域看是在什么场景了。
比如vue项目结构的，本地启动可使用配置文件解决，
例如：vue.config.js里面配置相关跨域设置
devServer:
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
before: app => ,
// 配置vue代理进行跨域
proxy:
'/api':
target:config.url,//目标地址
changeOrigin: true, //允许跨域
pathRewrite:
'^/api': ''
,
secure: false
//重写路径，其实这里就是和上面的target拼接起来


,
如果打包部署到测试环境或者生产环境，可用ngix配置请求转发来实现。 参考技术C 最常用的方式包括JSONP和CORS；

但是实际上这两种方式都不是单单靠前端自己能解决的，都需要后端开发配合。 参考技术D 1、JSONP跨域
  jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
2、跨域资源共享（CORS）
  CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
3、nginx代理跨域
  nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin...等字段。
4、nodejs中间件代理跨域
node中间件实现跨域代理，原理大致与nginx相同，都是通过一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。