草庐IT

前端代理解决跨域问题

我要努力要变强要优秀 2023-08-30 原文

涉及知识点

1.前端代理：解决跨域的问题

1.1了解跨域代理：https://segmentfault.com/a/1190000010719058

跨域是由浏览器同源策略引起的，是指页面请求的接口地址，必须与页面url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。

（由于页面开发中，静态资源是放在本地电脑上，访问这些资源通常通过ip方式（127.0.0.1）或者是localhosts来访问，与线上服务器所在的域名不符，不能顺利进行接口调用。）

解决跨域问题常用的解决方案有两个：

jsonp：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。

cors：服务器设置http响应头中的Access-Control-Allow-Origin值，解除跨域限制。

但是这两个都有一个致命的缺陷：严重依赖后端的协助。

于是有了前端独立就能解决的跨域方案：代理和反代理

代理

也称正向代理，是指一个位于客户端和目标服务器（target server）之间的服务器，为了从目标服务器取得内容，客户端向代理发送一个请求并指定目标（目标服务器），然后代理向目标服务器转交请求并将获得的内容返回客户端。

数据流程：

  • 数据请求过程：浏览器-》代理服务器-》目标服务器
  • 数据返回过程：目标服务器-》代理服务器-》浏览器

反向代理

反向代理（Reverse Proxy)是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

数据流程：

  • 数据请求过程：浏览器-》【反向代理服务器-》处理数据的服务器】
  • 数据返回过程：【处理数据的服务器-》反向代理服务器】-》浏览器

通俗地说：

「浏览器」可以看作食客，「【反向代理服务器-》处理数据的服务器】」这一个整体可以看作饭店，其中「反向代理服务」相当于点单的服务员。「处理数据的服务器」可以理解为是厨师。

  • 「食客」向来到「饭店」向「服务员」点菜，但服务员并不会真正去做菜，他是下达命令让「厨师」去做菜。
  • 「厨师」把菜做好了给「服务员」，「服务员」再把菜端给「食客」。

在外部看来，「代理服务器」和「处理数据的服务器」是一个整体。就好比，食客只会去饭店吃饭，而不是去找厨师吃饭（即对于浏览器来说，到达反向代理服务器已经完成任务了，后面的操作由反向代理服务器负责）。
具体饭店怎么操作，对食客是透明的。有可能某个服务员即当服务器也当厨师（即反向代理服务器和处理数据的服务器是同一台PC机）。

补充一下，没有反向代理，就好比没有了服务员，食客直接向厨师要吃的。譬如，你饿了，直接叫妈妈做饭是一样的（少了下订单的步骤）

1.2前端服务器代理Proxy

原链接：前端服务器代理 Proxy - Scok - 博客园

跨域资源请求

Vue资源服务器请求遇到常见的跨域资源请求时A-C-A-O,用Vue脚手架搭建的其实也是Node服务器环境.运行时仅仅只是将项目打包至内存环境下,然后浏览器运行该项目.若后端没有使用Cors中间件.则可以使用Proxy.

根目录创建 vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

具体配置信息

module.export={
  //代理一个服务器
  devServer:{
    proxy:'http://localhost:3000',
//告诉开发服务器将任何位置请求（没有匹配到静态文件的请求，代理到http://localhost:3000。
    host:'0.0.0.0',
    port:8003, //本地
    open：true,
    https：false,
    proxy:null,//string|Object
  },
  lintOnSave:false,//关闭esling警告。
  lintOnSave:process.env.NODE_ENV!=='production',//生产构建时禁用
  productionSourceMap：false，//打包不携带map文件
  
  //cli3代理多个服务器
  proxy:{//代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
  '/api':{   //axios访问/api==target+/api 
        target:'https://localhost:3000',
        changeOrigin:true,//创建虚拟服务器
        ws:true,//websocket代理
          }，
   　　'/douban':{// axios 访问 /douban == target + '/douban'
　　　　　　target:'https://api.douban.com',
　　　　　　changeOrigin:true,
　　　　　　pathRewrite:{//路径替换
　　　　　　　　'^/douban':'',// axios 访问/douban/v2 == target + /v2
　　　　　　}
　　　　}
　　}
}
  官方文档：


 

​

若有收获，就点个赞吧

前端代理xffxff0cxff0http代理模式交互

有关前端代理解决跨域问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  6. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  7. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  8. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  9. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  10. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

随机推荐