跨域三种方式

一、什么是跨域,跨哪些域

  协议(http、https)   域名(ip)   端口号(80、8080)

二、前后端分离为什么要跨域

  如果前后端没分离那么都在同一个服务器中,请求协议、域名以及端口一致自然不存在跨域问题

  前后台分离之后前后台有可能分开部署,也有可能使用不同端口,会存在跨域问题

三、跨域实际上是浏览器级别的限制

  我们在发出请求以及获取响应的时候实际上是成功了,但是由于浏览器做了拦截处理,所以无法获取数据

四、跨域知道的有三种        

1、jsonp    只能适用get请求

$.ajax({

url: "http://localhost:8080/aaaaa",

type: "GET",

dataType: "jsonp", //指定服务器返回的数据类型

success: function (data) {

alert(“success”);

}

})

2、添加<meta http-equiv="Access-Control-Allow-Origin" content="*" />    只能适用同一个域

3、cors(Cross-origin resource sharing),,,从服务端设置跨域信息            可以支持get、post、head、delete请求类型

  注意在发起delete请求的时候会先询问服务器是否支持delete请求,如果不支持的话会发送options请求,也叫做Preflight请求。

  添加服务器支持delete请求:add_header ‘Access-Control-Allow-Methods‘ ‘DELETE‘;

  

需要设置:

   Access-Control-Allow-Origin(必含) – 允许的域名,只能填通配符或者单域名

   Access-Control-Allow-Methods(必含) – 这允许跨域请求的http方法(常见有POST、GET、OPTIONS)

     Access-Control-Allow-Headers(当预请求中包含Access-Control-Request-Headers时必须包含) – 这是对预请求当中Access-Control-Request-Headers的回复,和上面一样是以逗号分隔的列表,可以返回所有支持的头部。

Access-Control-Allow-Credentials(可选) – 该项标志着请求当中是否包含cookies信息,只有一个可选值:true(必为小写)。如果不包含cookies,请略去该项,而不是填写false。这一项与XmlHttpRequest2对象当中的withCredentials属性应保持一致,即withCredentials为true时该项也为true;withCredentials为false时,省略该项不写。反之则导致请求失败。

Access-Control-Max-Age(可选) – 以秒为单位的缓存时间。预请求的的发送并非免费午餐,允许时应当尽可能缓存。

参考: https://segmentfault.com/a/1190000003710973

原文地址:https://www.cnblogs.com/freedom-yuxin/p/9175975.html

时间: 2024-11-18 17:51:10

跨域三种方式的相关文章

前端跨域几种方式

跨域问题的直接原因是浏览器存在同源策略,浏览器同源指的是:两个页面的协议.端口和主机相同,则两个页面具有相同的源.IE下满足协议.主机相同,就认为是同源. 想象一下,如果没有同源策略,谁都可以修改你站点上的内容,读取你的cookie,后果难以想象 前端跨域的几种方式 修改document.domain document.domain 用来获取当前网页的域名,document.domain可以被赋值 document.domain只能修改成当前域名的主域名或者基础域名,如当前域名是b.360.cn

跨域几种方式

一.什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象.当协议.子域名.主域名.端口号中任意一个不相同时,都算作不同域.不同域之间相互请求资源,就算作"跨域".例如:http://www.abc.com/index.html 请求 http://www.efg.com/service.php. 有一点必须要注意:跨域

jQuery 跨域访问的三种方式 No &#39;Access-Control-Allow-Origin&#39; header is present on the reque

问题: XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1 Resource interpreted as Script but transferred

相关前台跨域的解决方式

title: 前端跨域处理方式 date: 2018-07-08 00:37:29 categories: Web 前端 tags: 跨域 cors 关于跨域请求解觉方案问题 关于浏览器跨域问题,项目中也遇到了,看了项目上一些代码的处理方式,感觉存在不少不大完善的地方,因此对于跨域,想好好梳理一下,但是最近一直在忙,因此周六抽出一天的时间了学习消化做了写笔记. 跨域的概念 跨域和同源问题 跨域实质就是跨域名.跨端口.跨协议. 同源就是同域名.同端口.同协议. 假如一个网址是 http://bai

Struts2访问servlet的三种方式

第一种方式:使用ActionContext类实现 //获取对象 ActionContext context = ActionContext.getContext(); //获取页面提交数据 Map<String, Object> parameters = context.getParameters(); //操作域对象相关的方法 context.put(String,Object);//相当于HttpServletRequest的setAttribute方法 context.getApplic

不同vlan间的通信简单配置(三种方式)

不同vlan间的通信简单配置 1.单臂路由(图) 环境:一台路由器,一台二层交换机,两台pc机 二层交换机的配置一般模式:Switch>输入enable进入特权模式:Switch>enable输入configure terminal进入全局配置模式:Switch#configure terminal Enter configuration commands, one per line.  End with CNTL/Z.创建vlan 10 和 vlan 20:Switch(config)#vl

Struts中的数据处理的三种方式

Struts中的数据处理的三种方式: public class DataAction extends ActionSupport{ @Override public String execute() throws Exception { // 1. 请求数据封装: 2. 调用Service处理业务逻辑,拿到结果数据 3. 数据保存到域中 /* * // Struts中对数据操作,方式1: 直接拿到ServletApi, 执行操作 HttpServletRequest request = Serv

struts2简单入门-参数传递的三种方式

三种方式的简单说明 属性传递 把参数定义为属性提供get/set方法. 使用情况 参数少,不需要共享. 演示代码 1 public class LoginAction extends ActionSupport 2 { 3 private String username; 4 private String password; 5 6 public String getUsername() 7 { 8 return username; 9 } 10 11 public String getPass

hive三种方式区别和搭建、HiveServer2环境搭建、HWI环境搭建和beeline环境搭建

说在前面的话 以下三种情况,最好是在3台集群里做,比如,master.slave1.slave2的master和slave1都安装了hive,将master作为服务端,将slave1作为服务端. hive三种方式区别和搭建 Hive中metastore(元数据存储)的三种方式: a)内嵌Derby方式 b)Local方式 c)Remote方式 1.本地derby这种方式是最简单的存储方式,只需要在hive-site.xml做如下配置便可<?xml version="1.0"?&g