Vue+跨域问题处理

最新推荐文章于 2023-01-16 21:57:49 发布

@lwg

最新推荐文章于 2023-01-16 21:57:49 发布

阅读量161

点赞数 1

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/lwg112233/article/details/120049247

版权

本文介绍了浏览器的同源策略及由此引发的跨域问题。详细讲解了三种解决跨域的方法：1) JSONP，适用于GET请求，无兼容性问题；2) Nginx代理，轻量级且高并发；3) CORS，功能强大但兼容性稍逊。现代前端框架普遍采用代理和CORS策略处理跨域。

摘要由CSDN通过智能技术生成

1.1 什么是跨域？

1.本质是浏览器基于同源策略的安全手段,同源策略，它是浏览器最核心,最基本安全功能，协议，域名，端口都相同为同域，否则跨域

1.2. 解决方法

1.jsop原理实现：借助了script标签 src 请求资源时, 不受同源策略的限制

优点:jsonp没有兼容性问题

缺点:jsonp只能用于get请求

function JSONP({  
  url,
  params,
  callbackKey,
  callback
}) {
  // 在参数里制定 callback 的名字
  params = params || {}
  params[callbackKey] = 'jsonpCallback'
    // 预留 callback
  window.jsonpCallback = callback
    // 拼接参数字符串
  const paramKeys = Object.keys(params)
  const paramString = paramKeys
    .map(key => `${key}=${params[key]}`)
    .join('&')
    // 插入 DOM 元素
  const script = document.createElement('script')
  script.setAttribute('src', `${url}?${paramString}`)
  document.body.appendChild(script)
}

JSONP({