vue如何解决跨域的问题，有哪几种方式？-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue如何解决跨域的问题，有哪几种方式？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用axios发送请求之后，没有得到返回的数据，打开控制台发现如下图所示的报错：

vue如何解决跨域的问题，有哪几种方式？

这是提示跨域了。所有使用JavaScript的浏览器都会支持同源策略。同源策略即指域名/协议/端口号相同。只要有一个不同，就会当作跨域请求。

解决方法为：

1. CORS

后端通过 CORS 解决跨域,在响应头中添加:

Access-Control-Allow-Origin: <origin>

前端就可以通过 axios 跨域访问该后端 API。

2. proxy

在 vue.config.js 中配置 proxy 代理跨域:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }  
}

这样前端请求 '/api' 会被代理到 'http://localhost:8080',实现跨域。

3. JSONP

通过动态创建 <script> 标签跨域获取数据:

function getdata(url, callback) {
  var script = document.createElement('script')
  script.src = url + '?callback=' + callback
  document.body.appendChild(script)
}

getdata('http://example.com/getdata?a=1', 'callback')

function callback(data) {
  console.log(data)
}

服务端返回的 JSON 数据会作为 callback 函数的参数,实现跨域数据获取。

4. postMessage

在跨域的两个 window 之间通信:

// window1
window.addEventListener('message', function(e) {
  console.log(e.data)  
}, false)

// window2
var win = otherWindow.window
win.postMessage('message', 'http://example.com')

其他方案还有 Web Sockets、nginx 代理等。

总结一下，解决vue跨域的方法有：

1. 后端通过 CORS 添加响应头
2. Vue CLI proxy 代理跨域
3. JSONP 通过动态 <script> 标签跨域
4. postMessage 跨 window 通信
5. Web Sockets
6. nginx 反向代理

理解跨域问题的原理和常用解决方案对前端工程师来说是非常重要的。文章来源地址https://www.toymoban.com/news/detail-477571.html

到了这里，关于vue如何解决跨域的问题，有哪几种方式？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！