vue-cli+axios实现跨域访问数据

最新推荐文章于 2024-08-02 00:06:36 发布

即将秃头的小飞

最新推荐文章于 2024-08-02 00:06:36 发布

阅读量472

点赞数 1

文章标签： ajax vue

原文链接：https://blog.csdn.net/it_cgq/article/details/78781422

版权

1、我们在使用 vue-cli axios进行访问外部 API 接口的时候，常常会遇到跨域问题，想要获取后台数据的时候，控制台经常会出现以下错误提示！

在这里插入图片描述

2、什么是跨域？

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

链接：https://www.jianshu.com/p/8fa2acd103ea

3、如何解决跨域问题

axios访问API接口，进行跨域访问是不可以的，这是就需要配置代理了，为什么要配置代理呢？
原因是：因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。

4、解决跨域问题，具体操作方法

4.1、先自行百度在项目中配置好 axios 环境。

4.2、在 vue-cli 项目中安装 http-proxy-middleware 中间件作为代理

npm install -S http-proxy-middleware

4.3、为 http-proxy-middleware 这个中间件进行本地代理配置，在 vue-cli 项目中找到 config 文件夹下的 index.js

在 index.js 下的 module.exports 里找到 proxyTable{ }

在 proxyTable{ } 下进行如下配置：

proxyTable: {
 '/api': {
    target: 'https://www.baidu/xxx', // 你请求的第三方接口
    changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
    pathRewrite: { // 路径重写，
      '^/api': '' // 替换target中的请求地址，也就是说以后你在请求https://www.baidu/xxx这个地址的时候直接写成/api即可。
    }
  }
},

4.4、在 vue-cli 项目 src 文件夹下找到 HelloWorld.vue 其中的 axios 请求代码修改如下：

methods: {
// get跨域请求数据
  getWeather() {
  let _this = this;
  // 原API接口 url 地址：https://www.baidu/xxx
  // 就相当于 'https://www.baidu/xxx' == '/api'
  var url ="/api"; // 这里就是刚才的config/index.js中的/api
    this.$http
      .get(url, {})
      .then(res => {
         console.log(res)
       })
      .catch(function(error) {
         console.log(error)
       })
  }
}

4.5、因为在新版的 vue-cli 的 package.json 中 webpack-dev-server 没有设置 --open ,所以打开 package.json 文件在 ”scripts” 属性中的 ”dev” 属性中手动添加 --open ，如下代码所示：

"scripts": {
    "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "node build/build.js"
},

4.6、在 main.js 文件加一条指令：axios.defaults.baseURL = ‘/api’, 使每次请求都会带一个 /api 前缀

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/global.css'
import './assets/font/iconfont.css'
import axios from 'axios'
Vue.use(ElementUI)

// step：使每次请求都会带一个 /api 前缀
axios.defaults.baseURL = '/api'  // 关键代码 !!!!!!