前端：Proxy反向代理解决跨域问题

最新推荐文章于 2024-08-06 19:42:21 发布

秋秋叶子

最新推荐文章于 2024-08-06 19:42:21 发布

阅读量286

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2301_79258992/article/details/133305318

版权

想解决跨域，就得先知道跨域是什么。

跨域（Cross-Origin）指的是在浏览器环境下，当一个网页的运行代码试图访问不同源（Origin）的资源时，就会发生跨域。这里的"源"指的是一个网站的组成部分，包括协议（如http、https）、域名和端口号。

浏览器出于安全考虑，使用同源策略来阻止跨域访问，常见的跨域场景有：

1.不同域名：例如Javascript代码试图从另一个域名下加载资源。

2.不同子域名：例如Javascript从 www.example.com 发送带 api.example.com。

3.不同端口号：从http://example.com:8080 请求到 http://example.com:3000。

4.不同协议：从 HTTP 网页尝试加载 HTTPS 中的资源，或者从 HTTPS 加载 HTTP 的资源。

如果遇到跨域问题如何解决呢？

第一步：在项目中创建vue.config.js文件

// 解决开发室跨域问题
    proxy: {
      '/api': {
        target: '基 URL'
      }
    }
  },

第二步骤：通过服务器去向接口发请求proxy: 所有发往 api 的请求 (包含 api 的请求) ==> 转发到target 所指定的地址中去,而target里面就是基地址，而拦截器的basuURL就可以改为：'/api',这样就可以解决跨域导致的问题了

关注