踩坑笔记(七):跨域问题解决方案

  前言:在处理前后端交互时,经常会碰到前端向后端发送ajax/axios扥请求时的跨域问题,以下总结几种跨域问题的常见解决方案。**待完善

  • 跨域问题触发的条件

原因:前后端分离,前端web和后端数据等部署在不同的服务器上,甚至后台数据都可能在不同的服务器上(图片服务器,音视频服务器等),导致AJAX等发送请求时不在同一域名下,产生跨域问题。

  1. 协议名不一致
  2. 主机名不一致
  3. 端口号不一致
  • 跨域问题常见的解决方案
  1. JSONP

特点:只能用于处理GET请求(不安全/有缓存/URL长度限制等)
在这里插入图片描述

  1. 后台设置CORS跨资源共享

**自建项目中常用到(我用的就是这种方法)

// 处理跨域请求
res.setHeader("Access-Control-Allow-Origin","*")
  1. 前端添加http proxy代理服务器

接收同源请求/端口,然后在代理服务器侧进行转发;
在开发环境中,添加配置好http代理服务器后可在package.json中添加

"proxy":"http://localhost:5000"
  1. 其他:iframe(HTML5已废除);服务器侧设置nginx反向代理
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页