草庐IT

前后端分离项目解决前端跨域访问问题

luisblog 2023-04-19 原文

前后端分离开发，必须解决跨域问题！

跨域：对于 url 如 http://localhost:8080，请求协议、ip 地址、端口号，只要发送请求方和接收请求方的这三个数据中，只要有一个不同，就表示是跨域访问！

AJAX 跨域访问：用户访问 A 网站时所产生的对 B 网站的跨域访问请求均提交到 A 网站的指定页面

跨域问题，可以理解为浏览器的一种保护机制，不接收不被信任的请求。

如果前端和后端集中开发，比如单体项目中，他们的请求都是统一的，则不存在跨域问题！

跨域问题主要出现在前后端分离的项目中，前端和后端分离，请求方式不统一，此时必须解决跨域问题！

其他说明参考：

  1. 跨域，指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

    最简单的说就是从当前域名的网站下不能请求非同源的地址。

    所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。

    请特别注意：跨域问题是针对于浏览器的，因为需要解决的跨域问题，是浏览器施加的安全限制所造成的。

  2. 跨域是指跨域名的访问，有三种情况：

    • 域名不同的跨域
    • 域名相同、端口不同的跨域
    • 二级域名不同的跨域

  3. 举例说明:

    http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

    http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

    http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

    http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

    http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

    请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

  4. 跨域会阻止什么操作？

    浏览器是从两个方面去做这个同源策略的

    一是：针对接口的请求

    二是：针对Dom的查询

    这点就能够很好的防止别人把你经常访问的网页嵌入到 iframe 中来获取你的个人信息，比如 a 页面中嵌入了 iframe，src 为不同源的 b 页面，则在 a 中无法操作 b 中的 dom，也没有办法改变 b 中 dom 中的 css 样式。

    而如果 ab 是同源的话是可以获取并操作的。

————————————————
原文链接：https://blog.csdn.net/qq_39552268/article/details/116274094

情景：前后端分离项目中，前端浏览器通过 ajax 异步访问后端接口，后端响应数据时，前端出现跨源请求被拦截的问题，也就是跨域访问问题。

分析：前端发送请求，后端正常接收，只是后端响应数据时，前端接收有问题，问题出在前端接收响应这步上，浏览器会拦截跨源请求。

下面提供几种解决方案：（身为后端开发，我们主要通过后端解决此跨域问题）

  1. 在前端解决：在前端通过 JSONP 的配置，设置前端允许跨域

  2. 在后端解决：在后端设置响应数据，允许跨域（开发阶段可用）

    步骤：在控制器类上，直接添加 @CrossOrigin 注解即可，其主要作用是设置响应头，允许跨域访问。

  3. 在后端解决：通过 Nginx 配置（较优）

前后端前后httpcomnoopenerJava

有关前后端分离项目解决前端跨域访问问题的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. 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

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. 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

  5. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  6. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  7. 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

  8. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  9. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  10. 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=

随机推荐