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

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

相关推荐
爱分享的程序员3 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘8 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出10 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的10 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解13 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵16 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im16 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man17 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下32 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构