跨域问题以及解决方案

简介: 跨域问题以及解决方案

1.什么是跨域访问?

(1) 在a页面中想获取b页面中的资源,如果a页面和b页面所处的协议、域名、端口不同(只要有一个不

同),所进行的访问行动都是跨域的。

(2) 哪些跨域行为是允许的?

①直接在浏览器地址栏上输入地址进行访问

②超链接

<img src=”其它网站的图片是允许的”>

<link href=”其它网站的css文件是允许的”>

<script src=”其它网站的js文件是允许的”>

(3) 哪些跨域行为是不允许的?

①AJAX请求是不允许的

②Cookie、localStorage、IndexedDB 等存储性内容是不允许的

③DOM节点是不允许的

2. AJAX 请求无法跨域访问的原因:同源策略

(1) 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受

到XSS、CSRF等攻击。同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,

也非同源。

(2) AJAX 请求不允许跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是

结果被浏览器拦截了

3. 解决AJAX跨域访问的方案包括哪些

(1)CORS方案(工作中常用的)

这种方案主要是后端的一种解决方案,被访问的资源设置响应头,告诉浏览器我这个资源是允许跨域访问的:response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");

(2)jsonp 方案(面试常问的)

采用的是<script src=””>不受同源策略的限制来实现的,但只能解决GET请求。

(3)代理服务器方案(工作中常用的)

①Nginx反向代理

②Node中间件代理

③vue-cli(Vue脚手架自带的8080服务器也可以作为代理服务器,需要通过配置vue.config.js来启用这个代理)

(4)postMesssage

(5)websocket

(6)window.name + iframe

(7)location.hash + iframe

(8)document.domain + iframe

3.1 代理服务器方案的实现原理

同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略的

例子:

(1)基于Tomcat服务器开启了一个8000端口,提供了以下的一个服务,可以帮助我们获取到一个Bug列表:

http://localhost:8000/bugs/

(2)在8080服务器中发送AJAX请求访问8000服务器,必然会出现AJAX跨域问题:

(3)启用Vue脚手架内置服务器8080的代理功能

①简单开启:vue.config.js 文件中添加如下配置:

devServer: {
  proxy: 'http://localhost:8000' // 含义:Vue 脚手架内置的 8080 服务器负责代理访问8000服务器
}

发送AJAX请求时,地址需要修改为如下:

② 高级开启(支持配置多个代理)

devServer: {
  proxy: {
   '/api': {
    target: 'http://localhost:8000',
    pathRewrite:{'^/api', '},
    ws: true, // 支持 websocket
    changeOrigin: true // true 表示改变起源(让目标服务器不知道真正的起源)
   },
   '/abc': {
    target: 'http://localhost:9000',
    pathRewrite:{'^/abc', '},
    ws: true, // 默认值 true
    changeOrigin: true // 默认值 true
  }
  }
}
目录
相关文章
|
JavaScript API
本地开发环境请求服务器接口跨域的问题(vue的问题)
本地开发环境请求服务器接口跨域的问题(vue的问题)
760 0
|
SQL 关系型数据库 MySQL
六、SQL多表查询
六、SQL多表查询
539 0
|
IDE Java 开发工具
导入jar包后无法找到`com.aliyun.teaopenapi.models.Config`这个类
导入jar包后无法找到`com.aliyun.teaopenapi.models.Config`这个类
1985 3
|
前端开发 NoSQL JavaScript
常见接口和服务幂等性问题及解决方案
常见接口和服务幂等性问题及解决方案
1097 0
|
前端开发 JavaScript 安全
跨域的五种最常见解决方案
跨域的五种最常见解决方案
405 0
|
安全 数据安全/隐私保护
配置samba的访问密码和用户名
出于安全问题,需要为samba配置密码: $ smbpasswd -a 按提示输入想使用的密码即可 另外 /etc/samba/smb.conf 的 [global] 段必须有: security = user 如此这般,局域网的人访问你的电脑都需要以上命令设置的用户名和密码。
12974 2
|
7月前
|
供应链 JavaScript 数据挖掘
一套SaaS ERP管理系统源码,生产管理系统源代码
小微企业SaaS ERP系统,基于SpringBoot+Vue+UniAPP开发,集成进销存、采购销售、MRP生产、财务、CRM、OA等全流程管理功能,支持自定义表单与工作流,助力企业数字化转型。
443 1
|
4月前
|
前端开发 开发者 容器
如何解决 flex 布局下子元素 width 宽度设置失效的问题
本文通过实际案例,探讨前端开发中flex布局导致子元素宽度设置失效的问题,分析原因并提供两种解决方案:去除flex布局(不推荐)和设置min-width(推荐),帮助开发者深入理解flex特性,提升布局控制能力。
298 0
如何解决 flex 布局下子元素 width 宽度设置失效的问题
|
10月前
|
监控 网络协议 API
如何发布本地WebSocket服务以支持全球范围接入
实现全球范围接入的WebSocket服务不仅要考虑技术因素,还需要有适当的计划来应对不同区域的用户需求和网络状况。总的来说,让本地WebSocket服务支持全球接入是一个涉及多个层面、需要持续优化工作的过程。
225 12
|
11月前
|
存储 算法 NoSQL
2025 春季校招 java 研发岗位笔试题及相关内容
这份指南针对2025春季校招Java研发岗位,系统梳理了笔试核心知识点。内容涵盖Java基础(关键字、数据类型、循环与条件判断)、集合框架(List、Set、Map)、多线程(创建、同步、休眠与等待)以及异常处理(类型与机制)。通过典型例题解析与实践指导,帮助求职者掌握解题思路,提升编程能力,为成功通过校招笔试奠定基础。资源链接:[https://pan.quark.cn/s/14fcf913bae6](https://pan.quark.cn/s/14fcf913bae6)
295 0