解决前端跨域问题-搭建反向代理服务器

最新推荐文章于 2024-05-09 02:02:45 发布
最新推荐文章于 2024-05-09 02:02:45 发布
阅读量811 收藏
点赞数
分类专栏： js 文章标签： 前端 javascript 前端框架 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33943287/article/details/124161314
版权

在这里插入图片描述
(:/67f6172bf05d4353bcdb3b8dbdcc5865)]

开发中最常见的跨域问题

跨域问题的出现

“同源策略” ：同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

解决跨域的方法有有很多来对应各种应用场景。

搭建反向代理服务器

不同于需要后端开启CORS 这个前端自己就可以完成。

以安装有node环境为前提
如果没安装过请详询node环境安装教程

git地址：

https://gitee.com/huijia1/proxy-server

安装express：


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  一心诗意喂了狗
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
【反向代理】超全Nginx底层原理+案例实战+高可用集群搭建

				
			

			

				

					互联网小阿祥
				

				

					11-10
					
					5392
					
				

			

		

		

			
				
超全Nginx原理+实战篇，超多案例实战，黑名单封禁、网络限速、静态资源服务器、LVS+Keepalived高可用等等。

			
		

	



                

              
                



	

		

			

				
					
使用开源项目JustAuth完成第三方登录

				
			

			

				

					努力提高技术水平
				

				

					09-17
					
					2785
					
				

			

		

		

			
				
使用JustAuth快速构建第三方登录实战

			
		

	



                


  
              

                


	

		

			

				
					
vue跨域问题

				
			

			

				

					xuexuexiang的博客
				

				

					05-10
					
					378
					
				

			

		

		

			
				
现在访问http://iwenwiki.com:3000/personalized/newsong（网易云的歌曲接口）当用axios发起请求，报错‘Access-Control-Allow-Origin’，如下图所示：

就是跨域问题，可以用下面的方法解决：

在vue.config.js添加下图所示的代码：



devServer: {
  proxy: {
    '/api': {
      target: 'http://iwenwiki.com:3000',//目标网址
      chang

			
		

	





	

		

			

				
					
Web前端最全配置代理——解决跨域问题（详解）_前端配置代理解决跨域，2024大厂前端开发面试总结+解答

					
最新发布

				
			

			

				

					2401_84617131的博客
				

				

					05-09
					
					605
					
				

			

		

		

			
				
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记。

			
		

	



		

			
		



	

		

			

				
					
接口跨域访问完全解决方案（java五种跨域解决方案）

				
			

			

				

					ws - 兮的博客空间
				

				

					04-30
					
					1万+
					
				

			

		

		

			
				
1.使用jsonp解决网站跨域
2.使用HttpClient内部转发
3.使用设置响应头允许跨域
4.基于Nginx搭建企业级API接口网关
5.使用Zuul搭建微服务API接口网关（暂不说明）

一、使用JSONP
缺点：不支持post请求，代码书写比较复杂
ajax 改为jsonp

dataType : "jsonp"
jsonp : "jsonpCallback"
type : "GET...

			
		

	





	

		

			

				
					
使用CORS解决跨域问题

				
			

			

				

					熊诗言的博客
				

				

					02-21
					
					3237
					
				

			

		

		

			
				
后端接口和前端分离的时候，很多情况下会遇到跨域问题。这是浏览器的同源策略导致的，同源策略是为了Web安全提出的，说的是两个不同源的网址默认是不能请求对方的接口的。不同源包含：协议（http|https）、ip/域名、端口之一不同就是不同源。不同源的网页请求接口都要遵循浏览器的同源策略。

   解决跨域问题有两种方案，都需要服务端支持才可以。

   一种是JSON...

			
		

	





	

		

			

				
					
利用Nginx代理如何解决前端跨域问题详析

				
			

			

				

					01-09
				

			

		

		

			
				
前端开发会使用脚手架搭建前端开发环境，其底层通常会启动一个本地服务器，通常使用的是 nodejs 的 Express 框架。而后端则是提供接口，一般是放在线上的一个开发用的域名下。 这在开发过程中会导致 跨域 问题，即在...

			
		

	





	

		

			

				
					
node跨域转发 express+http-proxy-middleware的使用

				
			

			

				

					08-27
				

			

		

		

			
				
使用 Node 代理转发可以实现前后端分离，不需要在前端机器上搭建一套 Java 环境。只需要在 Node 服务器上安装 Express 和 http-proxy-middleware，配置代理规则，即可将客户端请求代理到目标服务器上。  Express 的...

			
		

	





	

		

			

				
					
nginx部署访问vue-cli搭建的项目的方法

				
			

			

				

					08-28
				

			

		

		

			
				
使用 Nginx 部署访问 Vue-cli 搭建的项目需要配置 Nginx 服务器，包括创建后台服务器对象、创建访问端口和反向代理规则、配置反向代理规则和配置跨域问题等步骤。通过这些步骤，我们可以成功地部署和访问 Vue-cli ...

			
		

	





	

		

			

				
					
vue-cli3配置与跨域处理方法

				
			

			

				

					10-16
				

			

		

		

			
				
1. **Nginx 代理**: 可以通过 Nginx 配置反向代理，将前端和后端都部署在同一域名下，从而规避同源策略。  2. **Vue CLI 3 的 devServer.proxy**：在 `vue.config.js` 中配置 `devServer.proxy`，将 API 请求代理到...

			
		

	





	

		

			

				
					
基于JavaScript的学科竞赛训练管理系统前端源码+项目使用说明(毕业设计).zip

				
			

			

				

					08-09
				

			

		

		

			
				
学科竞赛训练管理系统的前端使用 React 创建高可复用的组件，通过声明式编写复杂的 UI，使用 Nginx 作为 Web 服务器，反向代理以解决跨域问题；后端使用 Spring Boot 以约定式配置快速搭建项目，使用 Spring ...

			
		

	





	

		

			

				
					
Nginx搭建反向代理服务器过程详解

				
			

			

				

					04-04
				

			

		

		

			
				
Nginx搭建反向代理服务器，在如今大数据应用比较广泛的过程中， Nginx的应用也是及其重要的，尤其是搭建负载均衡服务器，反向代理等。

			
		

	





	

		

			

				
					
彻底解决跨域问题(五种解决跨域的方式)

					
热门推荐

				
			

			

				

					小雪的博客
				

				

					08-22
					
					3万+
					
				

			

		

		

			
				
跨域问题解决方案

最近自己写了一个js组件，该js组件是提供给第三方使用的，而js组件中涉及了ajax请求，于是乎就出现了跨域请求问题。下面记录一下自己的解决路程。

什么是跨域


  参考：跨域请求详解 
  个人理解：我理解的跨域就是，两个不同的ip或者域名，进行访问和数据交换，此时如果不做处理，便会发生跨域请求问题。详细解释看上面链接。


我自己就是因为js提供给其他服务器进行调用，而...

			
		

	





	

		

			

				
					
端口转发&&映射详解、代理&&反向代理深入认知

				
			

			

				

					NZXHJ的博客
				

				

					08-01
					
					6807
					
				

			

		

		

			
				
端口转发&映射详解、代理&&反向代理深入认知

			
		

	





	

		

			

				
					
前端vue配置反向代理 proxy

				
			

			

				

					qq2754289818的博客
				

				

					08-18
					
					3464
					
				

			

		

		

			
				
前端vue配置反向代理  proxy   devServer axios 分析功能  我们在开发的过程中会遇到 请求接口报错需要跨域的报错信息· 亿点小知识跨域的几种方法。

			
		

	





	

		

			

				
					
【Node】node.js实现服务器的反向代理，解决跨域问题

				
			

			

				

					wangchaoqi1985的博客
				

				

					04-20
					
					184
					
				

			

		

		

			
				
【Node】node.js实现服务器的反向代理，解决跨域问题

			
		

	





	

		

			

				
					
前端配置反向代理

				
			

			

				

					weixin_55116366的博客
				

				

					03-01
					
					4342
					
				

			

		

		

			
				
前端配置反向代理baseURL

			
		

	





	

		

			

				
					
前端工程配置Nginx反向代理

				
			

			

				

					一个本科小生的奋斗史
				

				

					06-06
					
					3045
					
				

			

		

		

			
				
前端工程配置Nginx反向代理HTTP配置HTTPS配置
配置两个反向代理，一个代理http页面，一个代理https页面，前者监听80端口，后者监听443端口。配置后整个文件如下，其中有不少冗余，挑有用的看即可。

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        

			
		

	





	

		

			

				
					
前端配置Nginx反向代理

				
			

			

				

					weixin_41673550的博客
				

				

					07-16
					
					300
					
				

			

		

		

			
				
第一步安装Homebrew，因为这里介绍的安装方式需要brew命令
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
第二步安装nginx  brew install nginx
访问 localhost:8080，成功了说明安装好了
重启  sudo ./nginx -s reload

 server {
    listen       80;   // 这里是我们想要默.

			
		

	





	

		

			

				
					
nginx反向代理如何解决前端跨域问题

				
			

			

				

					07-14
				

			

		

		

			
				
在使用nginx作为反向代理时，可以通过一些配置来解决前端跨域问题。下面是一种常见的解决方案：  1. 打开nginx的配置文件，一般为nginx.conf。  2. 在http块中添加以下配置，允许跨域请求：   ```nginx  http {  ......

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值