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

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

相关推荐
天天扭码2 分钟前
前端进阶 | 面试必考—— JavaScript手写定时器
前端·javascript·面试
梦雨生生18 分钟前
拖拉拽效果加点击事件
前端·javascript·css
前端Hardy26 分钟前
第2课:变量与数据类型——JS的“记忆盒子”
前端·javascript
冴羽41 分钟前
SvelteKit 最新中文文档教程(23)—— CLI 使用指南
前端·javascript·svelte
jstart千语1 小时前
【SpringBoot】HttpServletRequest获取使用及失效问题(包含@Async异步执行方案)
java·前端·spring boot·后端·spring
徐小夕1 小时前
花了2个月时间,写了一款3D可视化编辑器3D-Tony
前端·javascript·react.js
凕雨1 小时前
Cesium学习笔记——dem/tif地形的分块与加载
前端·javascript·笔记·学习·arcgis·vue
程序猿小玉兒1 小时前
若依框架免登陆、页面全屏显示、打开新标签页(看板大屏)
前端
小薛博客1 小时前
3、整合前端基础交互页面
java·前端·ai·交互
@蓝莓果粒茶1 小时前
LeetCode第158题_用Read4读取N个字符 II
前端·c++·python·算法·leetcode·职场和发展·c#