vue中请求服务端数据遇到同源策略，如何解决？

首先讲一下什么是同源策略？

同源策略是浏览器的一种安全策略，当我们的协议，域名，端口有一个不
相同就会产生同源策略的问题。
协议=http+https
域名=www.baidu.com
端口=80默认，8080,8888等等...

那为什么要封装api请求呢？

举个例子：
公司项目分1期和2期以及更多，我们做的项目是会迭代的，二期就是在第
一期的项目进行更新。 对功能进行更新的同时，很有可能去改接口地址，
所以要封装请求axios。 把接口放入模块中，统一的去管理。 
主要原因就是方便我们使用方便维护。

在组件中this指向什么？原理。

this.$http,this指向当前组件实例，简单说就是指向当前组件， 每个组
件都可以访问它的成员。把东西挂载到vue上，下面的组件也就是 构造函
数就可以访问了，通过this去访问。

原理图↓

跨域的认知？我们如何解决跨域？

首先强调一下，只要我们的开发环境没有在服务端或者和服务端的端口，ip
不一致就一定会有同源策略问题，只不过有一些项目接口在服务端帮我们
处理好了。
服务端和服务端请求是没有跨域问题的，只要没有在一起请求就有跨域问题。

Vue-Cli是什么？ Vue-Cli是脚手架，我们可以通过脚手架的代理去解决跨
域访问的问题，但是它只能解决开发环境的同源策略跨域问题，线上的后续
我会更新解决方案。

如何实现跨域请求呢？

代码↓

vue.config.js文件中

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 开启服务
  devServer:{
    // 代理配置
    proxy:{
      // 注意：配置完之后要重启项目
      // 如果请求地址有/api就会触发代理机制 在请求基地址写/api就会触发代理机制，只有这样才会触发的
      // axios 请求基地址必须和这个一致/api 才可以   而且必须有^
      '/api':{
        // target = 目标 告诉他去哪个服务器下去做请求。
        target:"https://www.thenewstep.cn/v1/vue3system/api",
        // 是否开启请求跨域？ 这个必须开启的
        // 没有e
        changOrigin:true,//开启跨域，才可以让本地服务代理我们发起请求，请求的目标地址是target
        pathRewrite:{
          // 地址重写 把地址中的api替换成“”
          '^/api':''
        }
      }
    }
    // 解决的只是开发环境的跨域问题，
  }
})

api封装的代码中

import http from '@/utils/index'

// 登录
export function login(dt) {
    console.log(dt);
    return http({
        url: '/users/login',
        method: 'POST',
        data: dt
    })
}
// 注册
export function register(data) {
    return http({
        url: 'users/register',
        method: 'POST',
        data
    })
}

封装的axios中

import axios from 'axios'
const instance = axios.create({
    baseURL: '/api',
    timeout: 3000
})

// config.headers!.Authorization=`Bearer ${token}
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config.headers.Authorization = window.localStorage.token
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default instance

使用时

注意：每当修改完配置文件的代码必须重启项目否则修改的代码无效，执行的还是你修改前的代码。

🖖🖖🖖您的点赞是我更文的最大动力, 点赞数越多就会更有动力更新，欢迎留言！！！🖖🖖🖖