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

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

跨域(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',这样就可以解决跨域导致的问题了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSDN 是一个技术社区和博客平台,而低代码前端框架是一种简化开发过程的工具。在使用 CSDN 的低代码前端框架时,有时会遇到跨域的问题,这就需要使用到框架中的 setupproxy解决跨域是指浏览器存在同源策略,限制了跨域访问资源的能力。同源是指协议、域名和端口都相同,而跨域就是协议、域名或端口有一个不同。在这种情况下,浏览器会阻止跨域请求,这会导致某些功能无法正常使用。 在低代码前端框架中,setupproxy 是一个帮助配置代理的工具。通过设置代理规则,可以解决跨域访问的问题。具体来说,使用 setupproxy 可以将浏览器的请求发送到代理服务器,再由代理服务器向目标服务器发送请求,绕过了浏览器的同源策略。 以 CSDN 低代码前端框架为例,假设我们要访问一个不同域名的 API 接口,我们可以在项目的根目录下找到一个名为 setupProxy.js 的文件。在该文件中,我们可以进行如下配置: const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://api.example.com', // 目标服务器的地址 changeOrigin: true, // 控制请求头中的 Host 域 pathRewrite: { '^/api': '', }, }) ); }; 上述代码中,我们配置了一个代理规则,将以 /api 开头的请求转发到目标服务器 http://api.example.com。通过设置 changeOrigin 为 true,我们可以控制请求头中的 Host 域,确保其和目标服务器相同。通过设置 pathRewrite,我们可以将请求路径中的 /api 前缀重写为空,以符合目标服务器的接口规则。 配置完成后,我们只需重启开发服务器,即可在开发环境中进行跨域访问。此时,所有以 /api 开头的请求都会被代理服务器转发到目标服务器,从而解决跨域问题。 总之,CSDN 低代码前端框架中的 setupproxy 提供了一个简便的方式来配置代理服务器,实现跨域访问资源。开发者只需按照框架提供的配置文件规则进行设置,便可以解决跨域问题,使得应用程序能够正常运行。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值