前端：如何解决项目中的跨域问题？

跨域问题

现在绝大多数公司的项目都是前后端分离的，前后端分离后势必会遇到跨域问题。

目录

跨域问题

一、为什么会出现跨域问题

二、什么是跨域

三、用vue-cil配置跨域代理解决跨域

---

---

一、为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

二、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前url	请求url	是否跨域
http://localhost:8888	https://localhost.javashitang.com	是，协议不同
http://loaclhost:8888	http://www:8888	是，域名不同
http://loaclhost:8888	http://loaclhost:8777	是，端口不同

三、用vue-cil配置跨域代理解决跨域

这个项目前端的项目在我自己的本地电脑中，网址是http://localhost:9528/

而后端的接口是https://jamqima.xxx.com  这两个并不在一个域名之下，那么前端项目访问后端接口必然存在跨域的行为。

之前做的那个后台美食管理系统这个项目并不存在跨域问题，因为我的后端接口是自己搭建在本地，自己本地搞了一个服务器，域名也是localhost，所以当时并不需要解决跨域问题。

跨域问题有开发环境的跨域和生产环境的跨域，我现在所遇见的这种跨域是位于开发环境的跨域，真正部署上线时的跨域是生产环境的。

解决开发环境的跨域：

Vue-cil的配置文件即 vue.config,js，示例说明：

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
        // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
        // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
        '/api': {
        target: 'www.baidu.com', // 我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
         // 路径重写
        pathRewrite: {
         // 重新路由  localhost:8888/api/login  =>www.baidu.com/api/login
            '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
        }
      },
    }
  }
}

我在员工考勤的后台管理在vue.config.js的配置如下：

// 代理跨域的配置
 proxy: {
  // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
  '/api': {
    target: 'http://ihrm-java.itheima.net/', // 跨域请求的地址
    changeOrigin: true // 只有这个值为true的情况下 才表示开启跨域
  }
}