实践中关于跨域的一些疑难备忘

1. 前端启动一个项目，在项目里访问后台资源可能会跨域；但是在浏览器里直接访问后台资源则不会跨域。

相关链接：为啥浏览器直接访问后端地址没有跨域问题
个人理解：这些知识虽然复杂，但是也讲理，总不会是无缘无故的。跨域是指浏览器阻止前端网页从一个域名（Origin）向另一个域名的服务器发送请求，获取资源。前端启动项目的时候，本地是有一个域名的，比如http://localhost:80/ ，这时候后端地址是'http://17.11.11.11:8080' ，那么这就构成了跨域了，因为也确实存在两个域。但是从浏览器直接访问后端资源则不存在本地的域，也就不构成跨域了。

2. 如何解决跨域的问题

1. CORS：

这是在后端配置的。注意CORS不能解决iframe嵌套的跨域问题，更进一步地则需要代理解决。

2.代理：

跨域是存在非同源的客户端和服务器端的，但是服务器端和服务器端就没有这个限制啦。所以：

1. 开发环境

vue2项目在vue.config.js中配置，以解决iframe跨域问题为例。本来页面代码是这样的，这里直接拼接上process.env.VUE_APP_BASE_API设置的地址去访问就会导致跨域问题，即使后端设置了CORS也不行。

vue2 复制代码

<template>
   <i-frame :src="url" />
</template>
<script>
import iFrame from "@/components/iFrame/index";
export default {
  name: "Druid",
  components: { iFrame },
  data() {
    return {
      url: process.env.VUE_APP_BASE_API + "/druid/login.html"
    };
  }
};
</script>

但是改一下url为：/api/druid/login.html，即在前面拼上/api。再到里vue.config.js加上proxy代理配置即：

js 复制代码

'/api': { // 使用相对路径作为代理前缀
      target: process.env.VUE_APP_BASE_API, // 使用 VUE_APP_BASE_API 的值
      changeOrigin: true,
      pathRewrite: {
        '^/api': '' // 重写路径，去掉 /api 前缀
      }
    }

解释一下上面配置的含义：

所有以 /api 开头的请求都会被代理。
target: process.env.VUE_APP_BASE_API：
- 目标服务器地址由环境变量 VUE_APP_BASE_API 决定。
- 例如，如果 VUE_APP_BASE_API 是 http://11.11.11.11:8080，那么目标服务器地址就是 http://11.11.11.11:8080。
changeOrigin: true：
- 改变请求的 host 头为目标服务器的 host。
- 例如，请求的 host 头会从 localhost 改为 11.11.11.11:8080。
pathRewrite: { '^/api': '' } ：
- 去掉请求路径中的 /api 前缀。
- 例如，请求 /api/druid/login.html 会被代理到 http://11.11.11.11:8080/druid/login.html。

这样url：/api/druid/login.html就被代理到process.env.VUE_APP_BASE_API + "/druid/login.html"了。访问地址还是一样的，但是此刻已经是代理请求的了。

另外说明一下，这里的代理服务器就是客户端，没有另外的服务器。