本地跑项目解决跨域问题

跨域问题:

指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制。

同源策略:

是指协议(protocol)、域名(host)、端口号(port),都必须相同,其中一个不同都会产生跨域。

www.test.com:8000 协议(http)、主域名(test)、子域名(www)、端口号(8000)

非同源限制

无法读取非同源网页的cookie、localStorage、IndexedDB

无法接触非同源网页的DOM

无法向非同源地址发送 AJAX 请求

方法一:配置代理

nginx配置代理

前端端口4200,后端端口8083,统一在代理中配置一个监听端口

server {listen 80;  location / {proxy_set_header    Host $host;proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass          http://localhost:4200;add_header          Access-Control-Allow-Origin *;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-NginX-Proxy true;}location /api/ {  proxy_pass http://localhost:8083;  proxy_set_header Host $host;  proxy_set_header X-Real-IP $remote_addr;  # 添加允许跨域的配置  add_header Access-Control-Allow-Origin *;  add_header Access-Control-Allow-Credentials true;  add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;  add_header Access-Control-Allow-Headers X-Requested-With,Content-Type,Content-Length,Accept,Authorization;  }  }

方法二:后端配置

写一个关于跨域的配置类CorsConfig

@Configuration // 一定不能忽略此注解public class CorsConfig {@Beanpublic CorsFilter corsFilter() {// 1.创建 CORS 配置对象CorsConfiguration config = new CorsConfiguration();// 支持域config.addAllowedOrigin("*");// 是否发送 Cookieconfig.setAllowCredentials(true);// 支持请求方式config.addAllowedMethod("*");// 允许的原始请求头部信息config.addAllowedHeader("*");// 2.添加地址映射UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();corsConfigurationSource.registerCorsConfiguration("/**", config);// 3.返回 CorsFilter 对象return new CorsFilter(corsConfigurationSource);}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/171629.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyCharm鼠标控制字体缩放

File->Settings->Keymap 右边搜索栏输入increase(放大),可以看到下面出现increase Font Size(放大字体尺寸),双击。 双击后出现几个选项,选择Add Mouse Shortcut,会出现一个页面给录入动作。 按住Ctrl同时鼠标向上滚动,该动…

论文精读 MediaPipe Hands

MediaPipe Hands:On-device Real-time Hand Tracking MediaPipe手势:设备上的实时手势跟踪 论文地址:2006.10214.pdf (arxiv.org) 源码地址:GitHub - vidursatija/BlazePalm: PyTorch 目录 摘要 介绍 架构 BlazePalm Detector Hand L…

jenkins分步式构建环境(agent)

rootjenkins:~# netstat -antp|grep 50000 tcp6 0 0 :::50000 ::😗 LISTEN 5139/java 1.52 安装Jenkins rootubuntu20:~# dpkg -i jenkins_2.414.3_all.deb 配置各种类型的Agent的关键之处在于启动Agent的方式 ◼ JNLP Agent对应着“通过Java Web启动代理”这种方…

【汇编】计算机的组成

文章目录 前言一、计算机的基本组成1.1 中央处理器(CPU)1.2 内存指令和数据存储的位置计算机中的存储单元计算机中的总线地址总线数据总线控制总线 1.3 输入设备和输出设备1.4 存储设备 二、计算机工作原理三、计算机的层次结构总结 前言 计算机是现代社…

Jenkins 构建CICD

GitLab GitLab安装 https://gitlab.cn/install/?versionce CentOS 下安装 1. 安装和配置必须的依赖项 在 CentOS 7上,下面的命令也会在系统防火墙中打开 HTTP、HTTPS 和 SSH 访问。这是一个可选步骤,如果您打算仅从本地网络访问极狐GitLab&#xf…

MTK手机平台充电原理

EPT GPIO初始化文件 bsp_gpio_ept_config.c 1 知识点总结 1.1 Official 参考充电电路 Figure 1-1 参考电路 VCHG:USB正极 VCDT:VCHG Charger Detect充电电压检测脚 ISENSE:充电电流检测电阻的正极 BATSNS:充电电流检测电阻的负极 …

振南技术干货集:研发版本乱到“妈不认”? Git!(5)

注解目录 1、关于 Git 1.1Git 今生 (Git 和 Linux 的生父都是 Linus,振南给你讲讲当初关于 Git 的爱恨情愁,其背后其实是开源与闭源两左阵营的明争暗斗。) 1.2Git的爆发 (Git 超越时代的分布式思想。振南再给你讲讲旧金山三个年轻人创办 GitHub&…

合众汽车选用风河Wind River Linux系统

导读合众新能源汽车股份有限公司近日选择了Wind River Linux 用于开发合众智能安全汽车平台。 合众智能安全汽车平台(Hozon Automo-tive Intelligent Security Vehicle Plat-form)是一个面向高性能服务网关及车辆控制调度的硬件与软件框架,将于2024年中开始投入量产…

Smart Link 和 Monitor Link应用

定义 Smart Link常用于双上行链路组网,提高接入的可靠性。 Monitor Link通过监视上行接口,使下行接口同步上行接口状态,起到传递故障信息的作用。 Smart Link,又叫做备份链路。一个Smart Link由两个接口组成,其中一个…

pyqt5学习-01 UI界面创建以及生成python代码

前提 环境搭建 打开designer 选择创建主窗体,拖入一个按钮 保存主窗体UI文件为firstMainWin.ui 将UI文件转化为python文件 # 可以把E:\Python\envs\pyqt5stu\Scripts\pyuic5.exe添加到环境变量中 E:\Python\envs\pyqt5stu\Scripts\pyuic5.exe -o firstMainWin.…

InSAR数据处理丨GMTSAR合成孔径雷达干涉测量丨GNSS、北斗高精度数据处理

①合成孔径雷达干涉测量InSAR数据处理、地形三维重建、形变信息提取、监测等应用 合成孔径雷达干涉测量(Interferometric Synthetic Aperture Radar, InSAR)技术作为一种新兴的主动式微波遥感技术,凭借其可以穿过大气层,全天时、全…

揭密,这个微信群机器人的所有秘密在这里

技术长久不用就废了,我想把软件开发技术重新捡拾起来。 咱们“一起学英语”群已有三年时光,群里很多朋友互帮互助走到了今天。可是,即使再好玩的英语话题,也有谈腻的时候。 群里是不是应该引入一点好玩的东西? 人工智能…