精华内容
下载资源
问答
  • 本地启动两个服务,一个前台,一个后台,访问的时候出现跨域问题。 请求跨域结果如下: Access to XMLHttpRequest at '...

    问题描述:

    本地启动两个服务,一个前台,一个后台,访问的时候出现跨域问题。

    请求跨域结果如下:

    Access to XMLHttpRequest at 'http://localhost:5000/users/api/login.do' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    解决办法:

    可以在前端页面package.json 里面配置一个代理服务器。如下:

    【package.json】文件添加如下代码:

    "proxy":"http://localhost:5000"

    页面上的请求域名,设置为空。代码如下:

    这样,基本上就配置好了。

    重新启动项目,npm start 运行,再次去请求,就不会出现跨域的问题啦。

    ------完。

    展开全文
  • 6. CORS支持 6.1、什么是跨域? 如果一个服务是91端口,这个服务又调用其他的服务。而这个服务是90端口,...对8081:如果8081端口的服务里这两个方法没有开启跨域支持8080,那么就会访问失败(没有解决跨域) 总结,

    6. CORS支持

    6.1、什么是跨域?

    image.pngimage.pngimage.png

    image.pngimage.png

    如果一个服务是91端口,这个服务又调用其他的服务。而这个服务是90端口,这就会出现跨域

    image.pngimage.png

    6.2、跨域怎么解决?

    1、jsonp,

    缺点:只支持Get,而且是把远程的函数拉过来本地运行。和开发流程不符合。所以最好使用CROS

    image.png

    2、CROS

    比如:

    对8080:当前服务是在8080端口,而我的前端想访问8081端口里的服务(添加、删除),请求8081

    对8081:如果8081端口的服务里这两个方法没有开启跨域支持8080,那么就会访问失败(没有解决跨域)

    总结,当8080端口的前端页面需要去8081端口拿数据(而不是8080自身),就会出现跨域。解决办法是让8081端口允许被跨域。

    注意:跨域指的不是自身前端页面解决,而是被请求的后端资源去解决。被请求的服务要允许自己被其他人访问,而不是仅仅是自身才能访问。

    服务端支持跨域

    image.png

    完整的跨域流程

    image.pngimage.pngimage.png

    跨域解决

    有两种办法:一种在方法上加@CrossOrigin、一种在全局进行配置

    下面创建两个工程

    8081工程提供后端服务。这里配置跨域,表示自己的资源可以被跨域取到。

    8080工程负责前端请求。这里发起ajax请求,去拿8081端口的服务。

    8081工程:这里是写在了方法上。

    @RestController
    @RequestMapping("/book")
    public class CROSController {
    
        @PostMapping("/")
        @CrossOrigin(value="http://localhost:8080",maxAge = 1800,allowedHeaders = "*")
        public String addBook(String name) {
            return "receive:"+name;
        }
    
        @DeleteMapping("/{id}")
        @CrossOrigin(value="http://localhost:8080",maxAge = 1800,allowedHeaders = "*")
        public String deleteById(@PathVariable Long id) {
            return String.valueOf(id);
        }
    }
    

    image.pngimage.png

    还可以写在全局中

    @Configuration
    public class MyWebConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/book/**")
                    .allowedHeaders("*")
                    .allowedMethods("*")
                    .maxAge(1800)
                    .allowedOrigins("http://localhost:8080");
        }
    }
    

    image.png

    配置文件把端口改成8081

    8080工程:

    resources/static文件下创建index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
        </script>
    </head>
    <body>
    <div id="contentDiv"></div>
    <div id="deleteResult"></div>
    <input type="button" value="提交数据" onclick="getData()"><br>
    <input type="button" value="删除数据" onclick="deleteData()"><br>
    <script>
        function deleteData() {
            $.ajax({
                url: 'http://localhost:8081/book/99',
                type: 'delete',
                success: function(msg) {
                    $("#deleteResult").html(msg);
                }
            })
        }
    
        function getData() {
            $.ajax({
                url: 'http://localhost:8081/book/',
                type: 'post',
                data: {name: '三国演义'},
                success: function(msg) {
                    $("#contentDiv").html(msg);
                }
            })
        }
    </script>
    </body>
    </html>
    

    然后运行两个服务。运行结果如下:

    image.png

    如果我把跨域代码注释,运行结果变成了:

    在这里插入图片描述

    展开全文
  • 请求跨域

    2018-09-22 16:45:51
    跨域的情况 跨域就是跨域名,跨端口,跨协议 直接在ajax中发起跨域的请求是获取不到相应的内容的   访问不了的案例(java) ...1.在本地搭建两个tomcat端口不同的项目,我这里是8099和8098端口 2...

    参考自:https://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html  (写的很好)

    跨域的情况

    跨域就是跨域名,跨端口,跨协议

    直接在ajax中发起跨域的请求是获取不到相应的内容的

     

    访问不了的案例(java)

    1.在本地搭建两个tomcat端口不同的项目,我这里是8099和8098端口

    2.编写controller以供测试

    	@RequestMapping(value="/list", produces ="application/text;charset=utf-8")
    	@ResponseBody
    	public String list(){
    		return "我是8098端口返回的数据";
    	}

    3.在页面中通过ajax发起跨域和不跨域的请求进行对比

    不跨域:

    	
    <a class="test1" href="#">我是测试跨域的(请求http://localhost:8098/list)  不跨域</a><br>
    	
    $(function(){
    		$(".test1").click(function(){
    			$.get('http://localhost:8098/list',function(data){
    				$(".p1").text(data);
    			});
    		});
    	});
    	

    可以得到结果:

    跨域

    <a class="test2" href="#">我是测试跨域的(请求http://localhost:8099/list)  跨域</a><br>
    
    	$(function(){
    		$(".test2").click(function(){
    			$.get('http://localhost:8099/list',function(data){
    				$(".p2").text(data);
    			});
    		});
    	});
    	

    是获取不到数据的,出现了跨域

     

    Jsonp跨域请求

    简单实现:

    在远程编写remote.js文件,本地跨域去访问

    localHandler({"result":"我是远程js带来的数据"});

    本地只需要写出来资源的位置就可以跨域访问:

    <script type="text/javascript" src="http://localhost:8099/js/remote.js"></script>

    数据的显示:

    remote.js文件,修改为数据

    localHandler({"result":"我是远程js带来的数据"});

    本地调用

        <script type="text/javascript">
        var localHandler = function(data){
            alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
        };
        </script>
        <script type="text/javascript" src="http://localhost:8099/js/remote.js"></script>

     

    Jquery实现Jsonp跨域请求(复制的)

    后台的数据:

    flightHandler({
        "code": "CA1998",
        "price": 1780,
        "tickets": 5
    });

    跨域调用

    <script type="text/javascript" src=jquery.min.js"></script>
          <script type="text/javascript">
         jQuery(document).ready(function(){ 
            $.ajax({
                 type: "get",
                 async: false,
                 url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
                 dataType: "jsonp",
                 jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
                 jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
                 success: function(json){
                     alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
                 },
                 error: function(){
                     alert('fail');
                 }
             });
         });
         </script>

     

     

     

    展开全文
  • NGINX跨域配置

    2020-12-15 17:58:06
    一个前后端分离的项目(由于前端有一个端口,后端有一个端口,两个端口是不同的,所以前端访问后端接口时会造成跨域问题,即使是在同一个服务器上也会有跨域),解决跨域一般来说有三种方式: jsonp(在前端解决...

    注:我的项目整体概况:存放前端和后端代码的文件夹都在我的电脑上,服务器在远程电脑上,在本地运行后端代码,可以通过swagger在本地访问到后端的接口。运行前后端代码时,各有一个端口,所以在我的电脑上产生了跨域的问题。
    一个前后端分离的项目(由于前端有一个端口,后端有一个端口,两个端口是不同的,所以前端访问后端接口时会造成跨域问题,即使是在同一个服务器上也会有跨域),解决跨域一般来说有三种方式:

    1. jsonp(在前端解决跨域,不是本文重点)
    2. 通过NGINX进行代理转发
    3. 修改后端脚本
      一般跨域时会出现如图所示的提醒:
      在这里插入图片描述
      它的意思主要是说从前端http://localhost:63342访问后端接口http://localhost:8088/v2/......./时由于浏览器的同源策略,虽然可能你的请求得到了后端的响应(请求的地址没错的话),但是在返回到前端的浏览器时被拦截了。本文主要是使用NGINX来对请求的接口进行代理转发。
      1、下载NGINX
      2、解压缩到一个目录下,运行主目录下的nginx.exe文件即可(双击之后会有一个cmd窗口一闪而过,此时应该想到安装Tomcat的时候也是这种情况,心一下子凉了半截,不要慌,一闪而过的cmd窗口正是说明成功打开了NGINX,这和Tomcat不一样,不用再占用cmd窗口了)。
      3、跨域的配置主要是在conf目录下的nginx.conf文件下进行
      在这里插入图片描述
      解决方法:
      nginx.conf文件中,找到http下的第一个server,新建一个location:
    //location后面加上/user/是利用正则表达式来匹配路径,只要你请求的URL里包含/user/都会将这个请求转发到下面你配置的proxy_pass后面的地址中去
    location /user/ {
    			#这里的地址需要修改为 http://自己要访问的后端IP:端口/文件名/
            	proxy_pass http://10.130.254.86:8080/user/;
            	add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
                if ($request_method = 'OPTIONS') {
                    return 204;
                }
            }
    

    (正向代理隐藏客户端,反向代理隐藏服务器)
    解析:

    listen    80
    并不是去监听你的浏览器的端口(因为浏览器的默认端口是80),这个端口其实是在前端请求的URL中包含的端口
    

    比如我分别在webstorm(在浏览器中默认打开的端口号是63342)中和vscode(在浏览器中默认打开的端口号是5500)中打开同一个请求URL,结果是一样的:
    在webstorm中的请求:

    在浏览器中的页面:
    在这里插入图片描述

    在这里插入图片描述
    在vscode中的请求:
    在这里插入图片描述
    在浏览器中的页面:

    在这里插入图片描述
    在这里插入图片描述
    请求到的结果是一样的。
    刚接触,有点逻辑混乱,以后慢慢整理。

    展开全文
  • Axios是不允许跨域访问的,别说跨域,跨端口都不行。例如某项目我本地vue前端frontEnd为`localhost:8888`,Java后台 backEnd为`localhost:8889` 。 这个时候就有两个方案了: - 修改`frontEnd`前端,支持跨域(通过...
  • 今天开始测试写好的Ajax端口,以适应台服务器之间的通信。测试方法如下: 有ABC三台电脑,其中B是放置Ajax应用的服务器,C是放置数据的服务器,它上面有一接受Ajax请求的应用。A是客户端。现在在A上访问B的应用...
  • 跨域 SSH

    千次阅读 2016-09-30 10:40:00
    能否在外网机上做代理,给内网机通过代理...假定A是本地内网主机,B是远程提供第三方服务的主机,这台主机之间无法连通。但是,现在还有一台C,可以同时连通前面台主机。因此,很自然的想法就是,通过C,将A连上B
  • 同源策略与跨域

    2021-02-25 16:03:27
    在一个浏览器的两个tab页中分别打开百度和谷歌的页面,当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,...
  • 假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上;B网站部署在:http://localhost:82 即本地ip端口82上。 现在A网站的页面想去访问B网站的信息,A网站页面的代码如下(这里使用jque
  • 你在本地跑你的前端项目,访问阿里云上的后台项目,两个ip不一样,存在跨域问题。 端口号不同 比如前后端分离项目 前端 localhost:8080 后端 localhost:8090 在前端页面,在localhost:8080里边,我要访问别的域...
  • 1.定义 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域...假设有两个网站,A网站部署在:http://localhost:7999 即本地ip端口上;B网站部署在:http://loca...
  • 1.定义 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是... 假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上;B网站部署在:http://loca...
  • 1.定义 ...假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上;B网站部署在:http://localhost:82 即本地ip端口82上。 现在A网站的页面想去访问B网站的信息,A网站页面的代码如下
  • 关于跨域的详细资料:跨域,这里只需要明确什么情况下跨域了(等同于两个url什么情况下是非同源关系)。 协议、域名、端口三者有其一不同,就算是跨域,就算是非同源 本地环境模拟 借助phpstudy创建两个非同源网站...
  • 最近工作中的项目需要通过浏览器ajax请求访问本地的一个http服务,不可避免遇到了跨域的问题,... URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。  比较容易忽略的一...
  • 我想在本地对接一下,就涉及到跨域问题。 跨域(Cross Origin) 跨域问题源自Web的跨源安全策略(同源策略)。默认情况下XHR对象只能访问同源的资源,这里的“同源”包括: 协议(Protocol)相同 端口(Port)相同 ...
  • 使用iframe+postMessage解决跨域问题,首先来过一遍其中的原理咯 原理: 发送方使用postMessage方法向接收方推送消息,第一个参数...我在本地开启了两个不同端口的tomcat;(以下是我的文件路劲) ①tomcat/webapps...
  • 不能解决不同域的两个页面或 iframe 之间进行数据通信的问题</li><li>无法捕获 Jsonp 请求时的连接异常,只能通过超时进行处理</li></ol> <h2>CORS: <p>CORS 是一个 W3C 标准,全称是"跨域资源共享&...
  • URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。 同源策略: 浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某...
  • JSONP技术

    2020-02-20 18:13:10
    一、跨域问题 同源策略(SOP): 访问浏览器的URL地址和发送XHR请求的URL地址必须满足三个一致:协议一致、域名一致、...模拟跨域:在本地产生两个服务器: (1)客户端通过Hbuild而访问。 (2)服务器通过自身的...
  • 用户访问两个网站A/B,并登录了A网站,A网站会在计算机本地存储Cookie或者Token等等,在访问B网站的时候,B网站就可以访问这些本地的存储信息,B网站可以使用用户的Cookie去登录A网站,那这样用户信息就被泄露了。...
  • 一、同源策略和资源跨域共享  1、同源策略  同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个...用户访问两个网站A/B,并登录了A网站,A网站会在计算机本地存储...
  • vue项目部署至nginx&踩坑记

    千次阅读 2018-11-22 10:26:56
    本地吭哧吭哧的写了两个星期,终于到了需要部署到服务器供测试的时候了!! 初始的设想是部署到tomcat,放在ROOT目录下,即可以使用 域名:端口/ 访问,但是涉及到后台请求跨域了,百度+咨询前同事,得出了结论...
  • 今天开始测试写好的Ajax端口,以适应台服务器之间的通信测试方法如下:有ABC三台电脑,其中B是放置Ajax应用的服务器,C是放置数据的服务器,它上面有一接受Ajax请求的应用A是客户端。现在在A上访问B的应用,用...
  • 我们提供了这种前后端分离的部署模式,主要的好处是支持前端热部署,在这种模式下,前端会通过8080端口访问后端的restful api接口,获取数据, 这将导致跨域访问的问题。 Dubbo Admin后端配置 当前版本的的Dubbo...

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

本地两个端口访问跨域