Vue——配置代理(解决ajax跨域问题)

文章目录

  • 发送ajax请求的4种方式
  • 使用axios发送ajax请求
  • 跨域问题
    • 跨域的理解
    • 跨域的报错
    • 跨域的解决
      • jsonp 和 CORS
        • jsonp 和 CORS的缺点
      • 配置代理服务器
        • 配置代理服务器原理
        • 配置代理服务器方法
          • 方法一
          • 方法二
  • 案例:github用户搜索案例
  • 发送ajax请求的库vue-resource

使用vue脚手架解决ajax跨域请求

发送ajax请求的4种方式

  • xhr方法: new XMLHttpRequest() (最原始写法) xhr.open() xhr.send()
  • jQuery方法: $get $post
  • axios :(Promise风格)
  • fetch:(Promise风格),fetch的兼容性较差
    jQuery和axios 是对 xhr方法的封装,而fetch方法和xhr方法是平级的,都在window对象身上。

在Vue中推荐使用axios发送请求。

使用axios发送ajax请求

  • 安装 :npm i axios
  • 引入:import axios from 'axios'
  • 发送axios请求
      axios.get('http://localhost:5000/students').then(
        response => {
          console.log("响应体内容", response.data)
        },
        error => {
          console.log("请求失败", error.message)
        }
      )

跨域问题

跨域的理解

同源请求是指协议名、主机名、端口号三者一样
跨域请求就是是指协议名、主机名、端口号三者有任何一个不一样都是跨域请求。
而且跨域请求是请求发出去了,浏览器接收并返回了结果,只是浏览器没有接收响应结果。
Vue——配置代理(解决ajax跨域问题)_第1张图片

跨域的报错

Vue——配置代理(解决ajax跨域问题)_第2张图片

跨域的解决

jsonp 和 CORS

我们js的跨域解决有两种办法:jsonp 和 CORS

jsonp 和 CORS的缺点

  • jsonp 靠

你可能感兴趣的:(VUE,vue.js,ajax,javascript)