使用 Vue.js 实现 SPA 应用中 Ajax 的数据跨域请求-JavaScript中文网-JavaScript教程资源分享门户

SPA (Single Page Application) 应用作为一种新型的 Web 应用，其已经越来越广泛地被应用于前端开发工作中。Ajax 这个技术在 SPA 应用中也是不可缺少的一部分，特别是在需要请求数据的时候。但是，由于浏览器的同源策略，跨域请求数据是一个非常棘手的问题。在本文中，我们将介绍如何使用 Vue.js 实现 SPA 应用中 Ajax 的数据跨域请求。

同源策略

同源策略是浏览器对于 JavaScript 在进行跨域操作时的限制，即只允许请求相同协议、端口和域名的资源。这是为了保证用户信息的安全性。例如，一个被攻击者在自己网站上插入的脚本能够获取此时用户正在浏览的其他网站上的 Cookie 等敏感信息。

虽然同源策略在一定程度上保障了 Web 应用的安全性，但是也给实现跨域请求带来了限制。

CORS（跨域资源共享）

CORS 可以解决跨域请求的问题。CORS 是一种机制，允许在某些条件下向不同源的服务器，发送 AJAX 请求。CORS 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

在 Vue.js 中，如果需要实现跨域请求，则可以通过以下步骤来实现：

第一步，安装 axios

在 Vue.js 中实现跨域请求的方法比较多，其中比较常用的是使用 axios。在之前需要安装 axios。

npm install axios

第二步，配置 axios

在 Vue.js 的全局配置中，我们可以通过 axios.defaults 对 Ajax 请求做一些统一的处理。比如默认请求头、响应数据格式等。其中，我们需要特别注意的是：axios.defaults.withCredentials = true。这个配置项设置为 true，则意味着我们允许跨域请求带上 Cookie 或 HTTP 认证信息。

import axios from 'axios'

axios.defaults.baseURL = 'http://api.example.com'
axios.defaults.timeout = 10000
axios.defaults.withCredentials = true

Vue.prototype.$http = axios

第三步，使用 axios 进行跨域请求

通过上面的第二步，我们已经配置好了 axios，现在在 Vue.js 组件的逻辑中，就可以直接使用 axios 发起 AJAX 请求。确保跨域请求代码逻辑正确，如把请求 parms / data 数据传递正确，axios 返回 Promise 回来，因此注意 Promise 中的处理逻辑。

这里我们以获取一个 JSON 格式的数据为例：

export default {
  data() {
    return {
      result: null
    }
  },
  methods: {
    fetchData() {
      this.$http.get('/data.json').then(response => {
        this.result = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

如果需要进行 POST 请求，则需要使用 this.$http.post()。

其他解决方法

除了使用 CORS，实现跨域请求的方法还有很多，其中比较常用的还有：JSONP、Websocket 和 Nginx 反向代理等。

JSONP 是一种在前端实现跨域请求的方式，但其方便性和实用性不如 CORS，而 Websocket 则是一种全新的协议，其可以实现双向通信，但需要服务端支持。而 Nginx 反向代理则可以通过配置 Nginx 服务器，在前端请求时将请求转发到同一个域名下。但是这种方式需要服务器并发支持，且需要配置较多的服务器信息。

总结

跨域请求是前端开发中一个重要而又棘手的问题，CORS 则是目前最流行的解决方案之一。在 Vue.js 中，我们可以通过配置 axios 来实现 CORS，这样就可以方便地进行跨域请求，并获取不同源的资源。当然，如果有其他跨域请求的需求，我们还可以使用其他的解决方案来实现。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a8ea43add4f0e0ff22bfaf

使用 Vue.js 实现 SPA 应用中 Ajax 的数据跨域请求