通过Vue自带服务器实现Ajax请求跨域（vue-cli）-CSDN博客

通过Vue自带服务器实现Ajax请求跨域vue-cli

跨域

• 原理从A页面访问到B页面并且要获取到B页面上的数据而两个页面所在的端口、协议和域名中哪怕有一个不对等那么这种行为就叫跨域。
• 注意类似通过请求进行跨域的大部分情况下并不是发不出去也有可能是被浏览器拦截了。

为什么端口、协议和域名有一个不同就不能跨域

• 同源策略同源策略是一种约定它是浏览器最核心也最基本的安全功能如果缺少了同源策略浏览器很容易受 到 XSS、CSRF 等攻击。同源是指"协议+域名+端口"三者相同即便两个不同的域名指向同一个 ip 地址 也是非同源的。

实现方案需要安装axios

• 原理浏览器和浏览器之间避免不了同源策略但是通过服务器和服务器之间的传递是不需要同源策略的。
  • 当在【页面】中点击【发送请求】则请求会去连接同在【8080服务器】
  • 再通过【8080服务器】的请求连接到【8081服务器】的程序
  • 【8081服务器】响应将数据传回【8080服务器】
  • 【8080服务器】响应将数据传到【页面】上

安装axios

• 原理是一种基于promise实现对ajax技术的一种封装可以满足于各种前端框架用于负责与后端交互get、post后端接口信息相当前后端的窗口。
• 安装方法
  • 打开CMD窗口通过命令跳转到当时安装Vue的文件路径中
  • 在窗口中输入npm i axios当出现added 6 packages in 2m就安装成功了
• 使用方法XXX.vue文件中在<script></script>的第一行输入import axios from 'axios'即可如果你的axios安装时弄了一个文件夹存放的话那么将'axios'=>'./文件名/axios')

启动Vue内置服务器8080的代理功能在vue.config.js中进行配置

第一种简单开启

• 原理优先从proxy的路径上去访问get('请求路径')的资源也就是拼接http://localhost:8000/请求路径如果没有找到资源则再从代理服务器上访问资源。
• 缺点这种配置方法不适合支持配置多个代理。
  • 这种单一的从8080端口=>8081端口当然可行但是还有8082、8083、8084…这么多端口每个配一遍就完了

// vue.config.js文件
devServer : {
    // Vue内置服务器8080端口
    proxy : 'http://localhost:8000'
}
// XXX.vue文件
axios.get('/请求路径').then(
    response => {
        // response.data:响应数据信息
        console.log('响应数据', response.data);
    },
    error => {
        // error.message出现错误时显示错误信息
        console.log('错误信息', error.message);
    }
)

第二种高级开启常用

devServer : {
    proxy : {
      // 凡事请求路径以/api开始的都走这个代理
      '/api' : {
        // 端口路径
        target : 'http://localhost:8000',
        // 重写'/api'路径
        pathRewrite : {'^/api':''},
        // 默认值true表示支持 websocket
        ws : true,
        // 默认值true表示改变起源让目标服务器不知道真正的起源
        changeOrigin : true
      },
      '/foo' : {
        target : '<other_url>'
      }
    }
  }

• 注意pathRewrite : {'^/api':''}原本是没有的可以自己添加用来重写’/api’路径
  • 以上的意思是将’/api’路径改为空也就是请求路径前不用写’/api’

// XXX.vue文件
axios.get('(如果没设置pathRewrite的话这里是要加上/api的)/请求路径').then(
    response => {
        // response.data:响应数据信息
        console.log('响应数据', response.data);
    },
    error => {
        // error.message出现错误时显示错误信息
        console.log('错误信息', error.message);
    }
)