【vue】- 请求接口的跨域处理

最新推荐文章于 2024-05-23 11:08:14 发布

头发茂盛男孩

最新推荐文章于 2024-05-23 11:08:14 发布

阅读量4k

点赞数 2

文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/m0_55960697/article/details/125313102

版权

有四种方案：

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 返回的数据