vue怎么实现跨域？

Love The Way You Lie 2023-10-03 08:32 5阅读 0赞

**目录**

1.跨域出现的原因是：浏览器的同源策略。

2.什么是跨域？

3.解决跨域的方式：

01.Jsonp

02.nginx反向代理

03.CORS

04 vue脚手架

04-1 思路：

04-2 vue-cli解决跨域配置说明

04-3 基地址

04-4 重启项目

04-5 总结

--------------------

### **1.跨域出现的原因是：浏览器的同源策略。** ###

> **同源策略**（英文全称 Same origin policy）是**浏览器**提供的一个**安全功能**
> 
> **`MDN` 官方给定的概念**：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

**通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：**

**① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB**

**② 无法接触非同源网页的 DOM**

**③ 无法向非同源地址发送 Ajax 请求**

### 2.什么是跨域？ ###

**同源**指的是两个 URL 的协议、域名、端口一致，反之，则是**跨域**

> **出现跨域的根本原因**：**浏览器的同源策略**不允许非同源的 URL 之间进行资源的交互

### 3.解决跨域的方式： ###

#### 01.Jsonp ####

> **总结：**最早的解决方案，**利用script标签src属性**可以跨域的原理实现。

> **原理：**由于在一个页面内部js如果要访问另一个非同源域的数据是被浏览器限制的，但是浏览器在解析和加载script标签的时候，是允许一个页面加载多个域的js标签，而js标签其实又是类似一种get请求的方式，只是返回的数据是一个JSON格式的脚本对象。

> **用法**：将get请求封装到script标签中，利用script标签做get请求，最后解析script标签数据
> 
> **限制：****只能发起GET请求**

#### 02.nginx反向代理 ####

> 先不做过多解释，稍后补充。

思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式

缺点：需要在nginx进行额外配置，语义不清晰

### 03.CORS ###

> CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
> 
> 它允许浏览器向跨源服务器，发出[`XMLHttpRequest`][XMLHttpRequest]请求，从而克服了AJAX只能[同源][Link 1]使用的限制。
> 
> **CORS需要浏览器和服务器同时支持。**目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
> 
> 前端设置，vue 设置 axios 允许跨域携带 cookie（默认是不带 cookie） axios.defaults.withCredentials = true; 3,2）后端设置： 3.2.1）跨域请求后的响应头中需要设置 3.2.2）Access-Control-Allow-Origin 为发起请求的主机地址 3.2.3）Access-Control-Allow-Credentials，当它被设置为 true 时，允许跨域 带 cookie，但此时 Access-Control- Allow-Origin 不能为通配符\* 3.2.4）Access-Control-Allow-Headers，设置跨域请求允许的请求头 3.2.5）Access-Control-Allow-Methods，设置跨域请求允许的请求方式

### 04 vue脚手架 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

#### 04-1 **思路：** ####

> 在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：
> 
> 1.  中间服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
> 2.  中间服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求
> 
> 这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

#### 04-2 vue-cli解决跨域配置说明 ####

> **在`vue.config.js`配置文件中，有一项是devServer，它就是我们下边要操作的主角。**

module.exports = {
      devServer: {
        // ... 省略
       // 代理配置
        proxy: {
            // 如果请求地址以/api打头,就出触发代理机制
            // http://localhost:9588/api/login -> http://localhost:3000/api/login
            '/api': {
              target: 'http://localhost:3000' // 我们要代理的真实接口地址
            }
          }
        }
      }
    }

#### 04-3 基地址 ####

**.env.development**

VUE_APP_BASE_API = '/api'

**api/user.js**

export function login(formData) {
      return request({
    /   url: 'api/sys/login',
    +   url: '/sys/login', // 前面的api就省略了
        method: 'POST',
        data: formData
      })
    }

#### 04-4 重启项目 ####

> 1.  修改了配置文件，一定要重启前端项目
> 2.  再次测试登陆接口，我们发现：跨域问题已经解决了

#### 04-5 总结 ####

> 1.  vue-cli集成了跨域代理功能-- **只能用在开发阶段**。
> 2.  vue.config.js文件中，在devServe下按指定格式配置了proxy，再**重启项目**即可。

> 特别强调：
> 
> ajax的基地址baseUrl必须是相对地址，而不能是绝对地址

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1][]

[XMLHttpRequest]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2012%2F09%2Fxmlhttprequest_level_2.html
[Link 1]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2016%2F04%2Fsame-origin-policy.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210619175155817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210619175911959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70