Vue在java项目中的应用——Vue3.0使用axios实现前后分离，解决No 'Access-Control-Allow-Origin' header is present on the req

axios是基于promise（诺言）用于浏览器和node.js，是http客户端。

axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

特点：支持浏览器和node.js

            支持promise

            能拦截请求和响应

            能转换请求和响应数据

            能取消请求

            自动转换JSON数据

             浏览器支持防止CSRF（跨站请求伪造）

vue中使用axios

运行 npm install axios 安装axios

在vue中引入axios

import axios from 'axios';

Vue.prototype.$http = axios

调用接口获取数据

fetchUsers (id) { this.$http.get('https://api.myjson.com/bins/l66xq') .then((response) => { // console.log(response); this.customer = response.data }) }

如何请求的数据不在同一资源路径下就会报错，Failed to load http://222.16.46.131:8080/Skyworth/changePictureAdmin: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.  

此时则需要解决跨域问题

proxy: { // 配置跨域
  '/api': {
    target: 'http://localhost:8088',
    ws: true,
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

配置了跨域后再修改接口为代理后的接口即可