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

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_APIhttp://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"了。访问地址还是一样的,但是此刻已经是代理请求的了。

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

2.生产环境:使用nginx

相关推荐
云浮万里_111 分钟前
保姆级教程:Vue3 + Django + MySQL 前后端联调(PyCharm+VSCode版)
vue.js·vscode·mysql·pycharm·django
程序员小刚33 分钟前
基于SpringBoot + Vue 的考勤管理系统
vue.js·spring boot·后端
uhakadotcom1 小时前
刚刚发布的React 19.1提供了什么新能力?
前端·javascript·面试
uhakadotcom1 小时前
Expo 简介:跨平台移动应用开发的强大工具
前端·javascript·面试
markzzw1 小时前
浏览器插件钱包(一) - 区块链世界的入口
前端·web3·区块链
夕水1 小时前
终于,我也能够写出一款代码编辑器
前端
red润2 小时前
npm包autocannon牛逼的后台压力测试库
前端·javascript·node.js
黄蘑菇2 小时前
white-space、word-break、overflow-wrap(原名word-wrap)的区别
前端
渔樵江渚上2 小时前
JavaScript函数柯里化:优雅的函数式编程实践
前端·javascript·面试
the_one2 小时前
如何判断一个属性是否存在
前端·javascript·面试