巧用NGINX配置解决跨域问题

页面nginx配置

1，前端页面放在域名根目录，比如，http://www.xuecheng.com/ ，对应的nginx配置：

#门户location / {alias  D:/Z_lhy/SpringCloud/xuecheng_online/www/xc-ui-pc-static-portal/;index  index.html;}

页面目录：

接口nginx配置

2，前端请求接口路径，在域名后面加一个目录

url : "http://www.xuecheng.com/api/auth/oauth/token",//发送请求的地址 

function login(){var uname = $("#username").val();var pwd = $("#password").val();$.ajax({url : "http://www.xuecheng.com/api/auth/oauth/token",//发送请求的地址 type: "post",dataType: "json",data : "username="+uname+"&password="+pwd+"&grant_type=password",beforeSend:function (request) {// 如果后台没有跨域处理，这个自定义request.setRequestHeader("Authorization","Basic RG9jV2ViQXBwOjEyMzQ1Ng==");// 禁用按钮，防止重复提交$("#submit").attr({ disabled: "disabled" });},error : function() {alert("error occured!!!");//请求失败时弹出的信息},success : function(data) {//返回的信息展示出来alert(JSON.stringify(data))}});};

nginx 对api接口配置

location /api/ {add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';if ($request_method = 'OPTIONS') {add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}proxy_pass http://apiserver/; proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_connect_timeout 5;}

其中的

$http_origin

$http_origin并不是nginx的内置参数，nginx支持取自定义的参数值，$http_XXX这个格式是nginx取请求中header的XXX的值的。这里取的是origin,而一般跨域请求都会将请求的来源放在origin中（浏览器会往跨域请求的header上面加origin这个header）。

这样配置的话，前端页面在域名下：www.xuecheng.com，而访问的接口则是www.xuecheng.com/api/xxx ，这样就不存在跨域问题了，

其实nginx不配置  Access-Control-Allow-Origin也没事，因为前后端在一个域下了。

注意事项

如果你前后端访问存在跨域问题，而且你需要使用cookie，后端要想获取到前端携带过来的cookie，前后端都要做配置：

前端：

var xhr = new XMLHttpRequest()
xhr.withCredentials = true
xhr.open('GET', 'http://localhost:8888/', true)
xhr.send(null)

后端：

Access-Control-Allow-Origin: http://www.abc.com（这里必须域名不能是*）
Access-Control-Allow-Credentials: true

完整nginx配置

#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;#微服务网关 upstream apiserver{server 127.0.0.1:50101;}
server {listen       80;  server_name  www.xuecheng.com;ssi on;ssi_silent_errors on;#charset koi8-r;#access_log  logs/host.access.log  main; #门户location / {alias  D:/Z_lhy/SpringCloud/xuecheng_online/www/xc-ui-pc-static-portal/;index  index.html;}#location  / {#   root /neworiental/www/jiaofu;#   index index.html;#   try_files $uri /index.html;#}# proxy_pass末尾有/,请求地址：http://localhost/api/test,转发地址：http://127.0.0.1:8000/testlocation /api/ {add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';if ($request_method = 'OPTIONS') {add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}proxy_pass http://apiserver/; proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_connect_timeout 5;}location ^~ /openapi/auth/ {proxy_pass http://apiserver/auth/;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {#    proxy_pass   http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#    root           html;#    fastcgi_pass   127.0.0.1:9000;#    fastcgi_index  index.php;#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;#    include        fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#    deny  all;#}}# another virtual host using mix of IP-, name-, and port-based configuration##server {#    listen       8000;#    listen       somename:8080;#    server_name  somename  alias  another.alias;#    location / {#        root   html;#        index  index.html index.htm;#    }#}# HTTPS server##server {#    listen       443 ssl;#    server_name  localhost;#    ssl_certificate      cert.pem;#    ssl_certificate_key  cert.key;#    ssl_session_cache    shared:SSL:1m;#    ssl_session_timeout  5m;#    ssl_ciphers  HIGH:!aNULL:!MD5;#    ssl_prefer_server_ciphers  on;#    location / {#        root   html;#        index  index.html index.htm;#    }#}}

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

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

相关文章

基于STM32设计的人体健康检测仪

基于STM32设计的人体健康检测仪

一、项目介绍 当前文章介绍基于STM32设计的人体健康检测仪。设备采用STM32系列MCU作为主控芯片，配备血氧浓度传感器（使用MAX30102血氧浓度检测传感器）、OLED屏幕和电池供电等外设模块。设备可以广泛应用于医疗、健康等领域。可以帮助医生和病…
阅读更多...
平板光波导中导模的(注意不是泄露模)传播常数β的matlab计算(验证了是对的)

平板光波导中导模的(注意不是泄露模)传播常数β的matlab计算(验证了是对的)

参照的是导波光学_王建(清华大学)的公式(3-1-2、3-1-3)，算的参数是这本书的图3-3的。 function []PropagationConstantsMain() clear;clc;close all lambda01.55;%真空或空气中的入射波长，单位um k02*pi/lambda0; m3;%导模阶数(需要人为指定) n11.62;%芯…
阅读更多...
网络知识点之-路由

网络知识点之-路由

本文章收录至《网络》专栏，点击右上角专栏图标可访问本专栏！ 路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程。路由工作在OSI参考模型第三层——网络层的数据包转发设备。路由器通过转发数据包来…
阅读更多...
MySQL数据库配置及创建用户和授权

MySQL数据库配置及创建用户和授权

注意： 都是基于MySQL8.0以上版本 1、检查是否安装过sql [rootlocalhost ~]# rpm -[qa](https://so.csdn.net/so/search?qqa&spm1001.2101.3001.7020) | grep mysql[rootlocalhost ~]# rpm -qa | grep [mariadb](https://so.csdn.net/so/search?qmariadb&…
阅读更多...
Spark（37）：Streaming DataFrame 和 Streaming DataSet 创建

Spark（37）：Streaming DataFrame 和 Streaming DataSet 创建

目录 0. 相关文章链接 1. 概述 2. socket source 3. file source 3.1. 读取普通文件夹内的文件 3.2. 读取自动分区的文件夹内的文件 4. kafka source 4.1. 导入依赖 4.2. 以 Streaming 模式创建 Kafka 工作流 4.3. 通过 Batch 模式创建 Kafka 工作流 5. Rate Source…
阅读更多...
随笔03 考研笔记整理

随笔03 考研笔记整理

图源：文心一言 上半年的博文整理，下半年依然会更新考研类的文章，有需要的小伙伴看向这里~~🧩🧩 另外，这篇文章可能是我上半年的努力成果之一，因此仅关注博主的小伙伴能够查看它~~&#x1f9e…
阅读更多...
嵌入式系统中的GPIO控制：从理论到实践与高级应用

嵌入式系统中的GPIO控制：从理论到实践与高级应用

本文将探讨嵌入式系统中的GPIO（通用输入输出）控制，着重介绍GPIO的原理和基本用法。我们将使用一个实际的示例项目来演示如何通过编程配置和控制GPIO引脚。将基于ARM Cortex-M微控制器，并使用C语言进行编写。 GPIO是嵌入式系统中最常见且功能最强大的接口之一。它允许硬件工…
阅读更多...
基于RK3588+FPGA+AI算法定制的智慧交通与智能安防解决方案

基于RK3588+FPGA+AI算法定制的智慧交通与智能安防解决方案

随着物联网、大数据、人工智能等技术的快速发展，边缘计算已成为当前信息技术领域的一个热门话题。在物联网领域，边缘计算被广泛应用于智慧交通、智能安防、工业等多个领域。因此，基于边缘计算技术的工业主板设计方案也受到越来越多人的关注。…
阅读更多...
linux 指令 第3期

linux 指令 第3期

cat cat 指令： 首先我们知道一个文件内容属性 我们对文件操作就有两个方面：对文件内容和属性的操作 扩展：echo 指令 直接打印echo后面跟的字符串 看： 这其实是把它打印到了显示器上，我们也可以改变一下它的打印位置…
阅读更多...
网络层中一些零碎且易忘的知识点

网络层中一些零碎且易忘的知识点

异构网络：指传输介质、数据编码方式、链路控制协议以及数据单元格式和转发机制不同，异构即物理层和数据链路层均不同RIP、OSPF、BGP分别是哪一层的协议： -RIPOSPFBGP所属层次应用层网络层应用层封装在什么协议中UDPIPTCP 一个主机可以有多个I…
阅读更多...
Bootloader

Bootloader

Bootloader 一段有下载和引导功能的程序 下载应用程序引导使MCU运行在应用程序中，只在有更新请求或者APP无效的时候才会激活 APP和Bootloader都存在Flash中Flash Driver用来擦除APP，下载临时存放在RAM中，下载完成后复位释放。一般随用随下&a…
阅读更多...
Pytorch个人学习记录总结 玩俄罗斯方块の深度学习小项目

Pytorch个人学习记录总结 玩俄罗斯方块の深度学习小项目

目录 前言 模型成果演示 训练过程演示 代码实现 deep_network tetris test train 前言 当今，深度学习在各个领域展现出了惊人的应用潜力，而游戏开发领域也不例外。俄罗斯方块作为经典的益智游戏，一直以来深受玩家喜爱。在这个项目中&…
阅读更多...
Python web实战 | 用 Flask 框架快速构建 Web 应用【实战】

Python web实战 | 用 Flask 框架快速构建 Web 应用【实战】

概要 Python web 开发已经有了相当长的历史，从最早的 CGI 脚本到现在的全栈 Web 框架，现在已经成为了一种非常流行的方式。 Python 最早被用于 Web 开发是在 1995 年（90年代早期），当时使用 CGI 脚本编写动态 Web 页面…
阅读更多...
spring启动流程 (6完结) springmvc启动流程

spring启动流程 (6完结) springmvc启动流程

SpringMVC的启动入口在SpringServletContainerInitializer类，它是ServletContainerInitializer实现类(Servlet3.0新特性)。在实现方法中使用WebApplicationInitializer创建ApplicationContext、创建注册DispatcherServlet、初始化ApplicationContext等。 SpringMVC…
阅读更多...
68. 文本左右对齐

68. 文本左右对齐

题目链接：力扣 解题思路：遍历单词数组，确定每一行的单词数量， 之后就可以得到每一个需要补充的空格数量。从而得到单词之间需要补充的空格数量。具体算法如下： 确定每一行的单词数量 初始值： num 0&…
阅读更多...
【JavaWeb】正则表达式

【JavaWeb】正则表达式

🎄欢迎来到边境矢梦的csdn博文，本文主要讲解Java 中正则表达式 的相关知识🎄 🌈我是边境矢梦，一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一下🫰🫰&am…
阅读更多...
2023年的深度学习入门指南(22) - 百川大模型13B的运行及量化

2023年的深度学习入门指南(22) - 百川大模型13B的运行及量化

2023年的深度学习入门指南(22) - 百川大模型13B的运行及量化 不知道上一讲的大段代码大家看晕了没有。但是如果你仔细看了会发现，其实代码还是不全的。比如分词器我们就没讲。 另外，13B比7B的改进点也没有讲。 再有，对于13B需要多少显存我们…
阅读更多...
ios 查看模拟器沙盒的路径

ios 查看模拟器沙盒的路径

打一个断点运行程序，在xcode consol底部控制台输入： po NSHomeDirectory() 复制路径粘帖到前往文件夹打开沙盒缓存文件夹
阅读更多...
golang pprof

golang pprof

pprof是一个用于分析数据的可视化和分析工具，由谷歌公司的开发团队使用go语言编写成的。一般用于对golang资源占用进行分析。不是原创，参考：https://juejin.cn/post/7122473470424219656 1. 通过页面查看golang运行情况 访问 http://127.0.0…
阅读更多...
ppt怎么压缩到10m以内？分享好用的压缩方法

ppt怎么压缩到10m以内？分享好用的压缩方法

PPT是一种常见的演示文稿格式，有时候文件过大，我们会遇到无法发送、上传的现象，这时候简单的解决方法就是压缩其大小，那怎么才能将PPT压缩到10M以内呢？ PPT文件大小受到影响的主要因素就是以下几点： 1、图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023