精华内容
下载资源
问答
  • ajax 本地跨域请求以及解决方法
    2021-08-07 00:10:08

    ajax 本地跨域请求以及解决方法

    什么是跨域?

    ?? 我们通常所说的跨域是狭义的, 是由浏览器同源策略限制的一类请求场景所谓同源是指 "协议 + 域名 + 端口" 三者相同, 即便两个不同的域名指向同一个 ip 地址, 也非同源, 只要没有同时满足这三个条件的请求即为跨域请求, 跨域请求控制台一般会出现类似错误:XMLHttpRequestcannot load http://xxxxx.php.

    NoAccess-Control-Allow-Originheaderispresent on the requested resource.

    Originhttp://xxx is therefore not allowed access.

    设置本地跨域

    ?? 首先我们在本地设置本地跨域请求, 首先需要安装 wamp 服务器, 其默认的 localhost 端口为 80, 我们找到 wamp 的安装路径, 如我的是安装在 D 盘, 则在 D:\wamp\bin\apache \apache2.4.9\conf \ 中打开 httpd.conf 文件, 在 Listen [::0]:80 语句下添加 Listen [::0]:8011, 点击保存, 重启 wamp 或 Apach, 这样我们就配置了一个 localhost:8011 端口接下来在 wamp\www 文件夹中新建 test1 和 test2 文件夹, 在 test1 下新建 index 文件, 在 test2 文件夹下新建 index2.php 文件

    方法一:

    1)test1/index.html 文件 js 代码如下:

    $(function(){

    $.ajax({

    url:"http://localhost:8011/test2/index2.php",

    type:get,

    dataType:jsonp,// 请求方式为 jsonp

    jsonpCallback:"onBack",// 自定义回调函数名

    success:function(data){

    console.info(data)

    }

    });

    });

    2)test2/index2.php 文件代码如下:<?php

    $callback=$_GET[callback];

    $data=array(a=>1,b=>2,c=>3);

    echo $callback.(.json_encode($data).);

    ?>

    这样就可以进行 ajax 访问了

    方法二:

    1)test1/index.html 文件 js 代码如下:

    functiondosomething(jsondata){

    console.log(jsondata)

    }

    2)test2/index2.php 文件代码同方法一的 test2/index2.php

    这样第二种方法也 ok

    方法三:

    1)test1/index.html 文件 js 代码如下:$.ajax({

    url:http://localhost:8011/test2/index2.php?callback=myFunction,

    type:get,

    data:{},

    success:function(json){

    console.log(json)

    },

    error:function(){

    alert(fail);

    }

    });

    2)test2/index2.php 文件代码:<?php

    header(Access-Control-Allow-Origin:*);

    $callback=$_GET[callback];

    $data=array(a=>1,b=>2,c=>3);

    echo $callback.(.json_encode($data).);

    ?>

    这样第三种方法也行啦

    请求方式:

    1)在 html 的 ajax 请求中 dataType: jsonp, 这句是关键, 没有这句就没法进行 ajax 请求这也就是 jsonp 的跨域请求方式缺点就是只能通过 GET 的请求方法, 不能用 POST

    2)第二种方法是利用 script 的 src 不受同源限制, 进行的方法回调进行跨域请求

    3)第三种方法是跨域资源共享 (CORS), 通过在请求文件添加 header(Access-Control-Allow-Origin:*);[// 指定允许其他域名访问] 实现跨域的, 可以多种请求方法

    4)还有其他的方法, 这边就不一 一讲述啦, 如有需要大家可以参考其他优秀文章

    结语:

    新人学习 ajax 跨域的小测试, 如有不足之处, 欢迎指正哈!

    github 下载地址: https://github.com/sharebetter/ajax

    来源: http://www.bubuko.com/infodetail-2523798.html

    更多相关内容
  • 本地启动两个服务,一个前台,一个后台,访问的时候出现跨域问题。 请求跨域结果如下: 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 运行,再次去请求,就不会出现跨域的问题啦。

    ------完。

    展开全文
  • 原因:网页端口号被改变了,与项目默认的端口不一样了 已拦截跨源请求:同源策略禁止读取位于 http://localhost:9528/background/admin/product/baseTrademark/1/5 的远程资源。(原因:CORS 头缺少 'Access-...

    已解决。原因:网页端口号被改变了,与项目默认的端口不一样了

    已拦截跨源请求:同源策略禁止读取位于 http://localhost:9528/background/admin/product/baseTrademark/1/5 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。状态码:200。

    展开全文
  • 所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没有同时满足这三个条件的请求即为跨域请求,跨域请求控制台一般会出现类似错误:XMLHttpRequest cannot load ...

    什么是跨域?

    我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没有同时满足这三个条件的请求即为跨域请求,跨域请求控制台一般会出现类似错误:

    XMLHttpRequest cannot load http://xxxxx.php.

    No 'Access-Control-Allow-Origin' header is present on the requested resource.

    Origin 'http://xxx' is therefore not allowed access.

    设置本地跨域

    首先我们在本地设置本地跨域请求,首先需要安装wamp服务器,其默认的localhost端口为80,我们找到wamp的安装路径,如我的是安装在D盘,则在D:\wamp\bin\apache \apache2.4.9\conf\中打开httpd.conf文件,在Listen [::0]:80语句下添加Listen [::0]:8011,点击保存,重启wamp或Apach,这样我们就配置了一个localhost:8011端口。接下来在wamp\www文件夹中新建test1和test2文件夹,在test1下新建index文件,在test2文件夹下新建index2.php文件。

    方法一:

    1)test1/index.html文件js代码如下:

    $(function(){

    $.ajax( {

    url: "http://localhost:8011/test2/index2.php",

    type: 'get',

    dataType: 'jsonp', // 请求方式为jsonp

    jsonpCallback: "onBack", // 自定义回调函数名

    success: function(data){

    console.info(data)

    }

    });

    });

    2)test2/index2.php文件代码如下:

    $callback=$_GET['callback'];

    $data=array('a'=>1,'b'=>2,'c'=>3);

    echo $callback.'('.json_encode($data).')';

    ?>

    这样就可以进行ajax访问了。

    方法二:

    1)test1/index.html文件js代码如下:

    function dosomething(jsondata){

    console.log(jsondata)

    }

    2)test2/index2.php文件代码同方法一的test2/index2.php

    这样第二种方法也ok

    方法三:

    1)test1/index.html文件js代码如下:

    $.ajax({

    url: 'http://localhost:8011/test2/index2.php?callback=myFunction',

    type: 'get',

    data: {},

    success: function(json){

    console.log(json)

    },

    error: function(){

    alert('fail');

    }

    });

    2)test2/index2.php文件代码:

    header('Access-Control-Allow-Origin:*');

    $callback=$_GET['callback'];

    $data=array('a'=>1,'b'=>2,'c'=>3);

    echo $callback.'('.json_encode($data).')';

    ?>

    这样第三种方法也行啦

    请求方式:

    1)在html的ajax请求中dataType: 'jsonp',这句是关键,没有这句就没法进行ajax请求。这也就是jsonp的跨域请求方式。缺点就是只能通过GET的请求方法,不能用POST。

    2)第二种方法是利用script的src不受同源限制,进行的方法回调进行跨域请求。

    3)第三种方法是跨域资源共享(CORS),通过在请求文件添加header('Access-Control-Allow-Origin:*');[//指定允许其他域名访问]实现跨域的,可以多种请求方法。

    4)还有其他的方法,这边就不一 一讲述啦,如有需要大家可以参考其他优秀文章

    结语:

    新人学习ajax跨域的小测试,如有不足之处,欢迎指正哈!

    展开全文
  • js访问本地文件跨域,html文件访问跨域报错一、什么是跨域?1.什么是同源策略二、解决方案1.webstorm自动开启Web服务2.vscode需要安装插件live service2.用edge浏览器打开总结 一、什么是跨域? 在前端领域中,跨域...
  • 前端后端跨域问题

    2019-01-02 23:31:23
    跨域 原因:  浏览器限制  跨域(域名,端口,协议,ip不一样)  在使用XMLHTTPRequest对象发送HTTP请求时,会遇到同源策略问题,域不同请求会被浏览器拦截。
  • 主要介绍了vue 本地服务不能被外部IP访问的解决方法,本文通过代码讲解的非常详细,需要的朋友可以参考下
  • 1、谷歌浏览器非安全模式解决跨域  右击谷歌浏览器、在属性>>快捷方式>>目标里尾部加上 --disable-web-security --user-data-dir。前面要有空格 2、webpack前后端分离开发接口调试proxyTable解决方案...
  • vue前端设置跨域(跨端口)

    千次阅读 2021-02-24 23:45:13
    前端项目访问接口是8080,后台项目提供接口是8081,这种跨端口跨域问题,前端处理方案如下
  • 自己随便写了JSON文件,然后想要用AJAX方式读取文件资源,然后就发现了以下错误: 网上查了很多资料,说是跨域造成的,具体啥是跨域…目前本小白还不是特别清楚,不过摸索了半天倒是找到了解决办法。在此想先把...
  • 本地域名设置和跨域行为

    千次阅读 2020-07-21 15:16:29
    使用域名访问本地项目//和跨域行为 统一环境 我们现在访问页面使用的是:http://localhost:9001 有没有什么问题? 实际开发中,会有不同的环境: 开发环境:自己的电脑 测试环境:提供给测试人员使用的环境 预发布...
  • 前端本地配置nginx解决跨域问题

    千次阅读 2019-07-15 14:14:13
    nginx解决跨域问题 前几天项目经理告诉我,需要我完成一项任务,任务内容是根据他提供的Excel表格内容,写一段js调用后台接口创建标签分组创建分组及调用创建标签接口创建...(1)直接双击nginx.exe,双击后一黑色...
  • 如何解决跨域问题

    2022-04-10 22:24:46
    IP与端口号存在任何不同都叫跨域,并非是台电脑才存在跨域
  • 所谓同源(即指在同一个域)就是两个页面具有相同协议(protocol)、主机(host)和端口号(port) 3.什么是跨域 当前url请求另一个url时,协议、域名、端口号三者之间任意一个与当前url不同则视为跨域 当前url 被...
  • 当你遇到跨域问题,不要立刻就选择复制去尝试...当网站8080去访问服务端接口时,就产生了跨域问题,那么如何解决?接下来我把跨域遇到的各种情况都列举出来并通过nginx代理的方式解决(后台也是一样的,只要你理解的原.
  • python 跨域访问

    2021-04-27 13:40:57
    同源:即是同源 —— 资源url的协议 + 域名 + 端口相同 (不同原则反之) 同源情况下: 不同源情况(遵循三步走 ): (1)、发送OPTIONS请求来询问目标源主机是否允许此次跨域请求 (2)、目标源主机响应...
  • 原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目上.需要在根目录下新建文件vue.config.js.vue.config....
  • 本小节讲解CEF如何加载本地网页,并解决本地网页与服务端Ajax通信跨域问题(CORS)。至于JavaScript与C++代码的相互调用将在下一节中讲解。 1. 本地网页 ​ 首先我们需要准备本地Html5文件(*.js, *.html, *.css,
  • PHP实现跨域解决办法

    2021-04-24 22:35:25
    这两天,项目上遇到了如何解决跨域问题.对于跨域.百度了一下也是很快解决.出于对跨域的不了解,也是通过查资料了解了...同源URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。...
  • //如果使用上面的9000端口地址访问出错502的话,就换成这(注意该sock文件的权限问题) fastcgi_index index.php; fastcgi_split_path_info ^((?U).+\.php)(/?.+)$; fastcgi_param SCRIPT_FILENAME $document_root$...
  • 我们在写前后端分离的时候,请求后端接口是必要步骤,但是这时候就有问题,因为前段和后端是归属于不同端口,我们在直接访问后端时,会触发csrf(跨站请求伪造) 一、vue.config.js文件 vue项目中可选的配置...
  • 域名及跨域问题

    2021-08-29 21:02:04
    刚开始开发的时候,我们使用IP+端口号的形式访问服务。 但是这样的话,如果运行环境改变了之后就会出现问题,我们需要用不同的IP访问服务。 解决1 统一使用域名来访问服务。 门户系统:www.leyou.com 管理系统:...
  • 总结:只能在本地使用proxy,打包上线就不会出现webpack的proxy(详细步骤) 运行结果: 前端服务: 代码: index.js(前端写的) //import 'aaa' form 'aaa' console.log('log'); //前端请求后端接口 ajax let xhr=new ...
  • 在上一篇Fiddler系列文章:Fiddler设置断点(一),主要介绍了通过Automatic BreakPoints设置断点,以下主要介绍Fiddler跨域调试及Django跨域处理。...所谓同源(即指在同一个域)就是两个页面具有相同的协议(p
  • Ajax跨域详解

    2021-01-28 21:52:14
    跨域问题是什么? 测试环境搭建 采用SSM+Ajax,软件工具使用的是IDEA+HBuilderX,测试用的是火狐浏览器。 前端的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> ...
  • 本文建立在你已经在windows7上已经配好...因为编者已经为该项目已经实现了VUE接口统一管理,所以接下来的讲解是在这接口统一管理的环境下进行的 关于VUE接口统一管理,可以参照这里: 参照1:https://www.cnblog...
  • 所谓同源策略就是在浏览器端出于安全考量,向服务端发起请求必须满足:协议相同、Host(ip)相同、端口相同的条件,否则访问将被禁止,该访问也就被称为跨域访问。 虽然跨域访问被禁止之后,可以在一定程度上提高了...
  • 如果协议,端口(如果指定了)和主机对于两个页面是相同的,则两个页面具有相同的源,也就是同源。也就是说,要同时满足以下3个条件,才能叫同源: 协议相同 端口相同 主机相同 举个例子就一目了然了: 我们来看...
  • 像我不可解Nginx、tomcat、Apache三区别和用法。个人分享:https://www.zhihu.com/question/32212996/answer/87524617 第一步:下载nginx、搭建、配置 下载nginx: http://nginx.org/en/download.html 解压到(D:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,926
精华内容 5,970
关键字:

本地两个端口访问跨域