有四种方案:

  • JSONP
  • CORS
  • webpack反向代理
  • fetch方法

第一种:JSONP

JSONP 是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求,不支持 POST、DELETE 等其它请求。 JSONP 方案没有用到 XMLHttpRequest 对象,因此,JSONP 不是真正的 Ajax 技术

JSONP 实现原理

JSONP 本质是利用script标签的src属性天然跨域特性

通过script的src属性获取到的内容默认会以js语法来解析

从来没有人规定,script的src属性只能设置js文件路径,意味着也可以将路径设置为 后台接口路径或者txt文件等

只能发起get请求,不能发起其它类型的请求

它的实现方式是:调用jsonp接口,传入前台拥有的函数名称,后台返回函数的调用形式,并且在其中拼接相应的数据,前台接收之后以js语法来解析

jsonp严重的依赖服务器的配合,现在很少使用

script 标签的 src 属性,不受浏览器同源策略的限制, 可以把非同源的 JavaScript 代码请求到本地,并执行

 <script src="http: //www.itcbc.com:3006/api/getscript"></script>

第二种:CORS

CORS解决跨域数据请求的终极解决方案,全称是 Cross-origin resource sharing。

CORS 技术需要 浏览器和服务器 同时支持,二者缺一不可: 浏览器要支持 CORS 功能(主流的浏览器全部支持,IE 不能低于 IE10) 服务器要开启 CORS 功能(需要后端开发者为接口开启 CORS 功能)

实现 CORS 的关键,是在服务器端 原因:如果服务器端没有开启 CORS 功能,则客户端无法访问那些跨域的接口

CORS 是真正的 Ajax 请求,支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式 只需要后端开启 CORS 功能即可,前端的代码无须做任何改动

服务器端通过 Access-Control-Allow-Origin 响应头,来告诉浏览器当前的 API 接口是否允许跨域请求。

第三种:webpack反向代理

 有时候后端没有对跨域进行处理,原因他可能在忙.....

而我们又需要不出现跨域进行开发测试,这时候我们前端也可以自己来搞。

开发环境的跨域,也就是在vue-cli脚手架环境下开发启动服务时,我们访问接口所遇到的跨域问题,vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题

这就是vue-cli配置webpack的反向代理

vue-cli的配置文件即vue.config.js,这里有我们需要的 代理选项  

module.exports = {
  devServer: {
   // ....
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
        // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 (行得通)
        // 本地的前端  =》 另外一个服务器发请求 (跨域 行不通)
        // 当我们的本地的请求 有/api的时候,就会代理我们的请求地址向另外一个服务器发出请求
        '/api': {
        target: 'www.baidu.com', // 我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
         // 路径重写
        pathRewrite: {
            // 重写路径,替换请求地址中的指定路径
            '^/api': '/' // 将请求地址中的/api替换为空,也就是请求地址中不会包含/api/就需要这么做 
        }
      },
    }
  }
}
`注意:如果我们需要 代理的请求地址 和我们 本身的请求地址 一样的话,那么本身的地址就不需要写了,因为代理地址一样,也是和本身的地址请求,这样就无法解决跨域问题 如:
这里地址一样,本身的地址就不需要再写
VUE_APP_BASE_API = '/api'`

第四种:fetch方法

需要解释下这个fetch是什么,这东西用的少,但有一些大厂可能有用到,如知乎

  • fetch是传统ajax的升级版本,是原生js

  • fetch是新一代 XMLHttpRequest 的一种替代方案。无需安装其他库。可以在浏览器中直接提供其提供的api轻松与后台进行数据交互。

  • 更加简单的数据获取方式,功能更强大,更灵活,可以看作是xhr的升级版。

  • 基于Promise实现

  • 可以解决跨域的问题

  • fetch支持在vue环境中使用。这样通过ajax请求就无需通过安装axios依赖库来实现。

  • 使用不方便,想要封装

fetch的基本使用:

    //Fetch API 基本用法
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
      return data.text();
    }).then(function(data){
      console.log(data);
    })

这里的text() 是响应结果 对应的还有json()  

export function getAddress() {
  // 使用fetch来解决跨域
  // 因为现在的请求ip是高德的,由于本地请求拦截器的请求头带上了我们的token,所以会跨域
  return fetch('https://restapi.amap.com/v3/config/district?key=bae999cd582cdd539cb0e14ae0698205&keywords=&subdistrict=3&extensions=base').then(function(response) {
    return response.json()
    // 返回的data是object对象,可以直接获取对象中属性的值 (data.属性名)
  })
}
// 通过 const res = await getAddress() 可以获取到response 返回的数据 

 

Logo

前往低代码交流专区

更多推荐