使用nginx解决跨域问题---小实操

最新推荐文章于 2024-10-18 16:02:37 发布
最新推荐文章于 2024-10-18 16:02:37 发布
阅读量253 收藏
点赞数
分类专栏： java基础 文章标签： java nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/junxunfs/article/details/114376191
版权

环境准备

前端
node+express访问html文件
1.首先在需要操作的文件夹下安装express模块

D:\vs code\File\hrml\mysqlweblod> npm install express

2.先写第一个web服务

创建app.js文件，如下

let express = require('express')
// 创建应用
let app = express()
 
// get请求
app.get('/user/find',(req,res)=>{
    res.send('hello')
})
 
// 启动服务,监听端口
app.listen(3000,()=>{
    console.log('启动成功...')
})

此时，可以开启node服务，
在当前文件目录终端下输入：node. app.js
在当前文件目录终端下输入：node.app.js
访问 http://localhost:3000/user/find 显示

Holle word

在这里插入图片描述

3.创建index.js文件，如下

//引入exprexx模块
var express =require("express");
var app =express();
app.use(express.static('public'))

//参数‘/’可当作设置url的根显示页面，这里即”http://localhost:8082/“访问的页面设置为index2.html
app.get('/',(req,res)=>{
    res.sendFile(__dirname+"/"+"index2.html")        //设置/ 下访问文件位置
});

//参数‘/index’可当作设置url的/index下显示页面，这里即”http://localhost:8082/index“访问的页面设置为index2.html
app.get("/index",(req,res)=>{
    res.sendFile(__dirname+"/"+"index.html")        //设置/index下访问文件位置
})

//设置端口8082访问地址，即http://localhost:8082
var server =app.listen(8082,()=>{
    var port =server.address().port
    console.log("【】访问地址http://localhost:%s",port)
})

准备index.html：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<h2>Hello World!</h2>
<p>即将访问：localhost:3000/user/find</p>
<script type="text/javascript">
    function fun1(){
        var request = new XMLHttpRequest();
        request.open("GET","http://localhost:3000/user/find")
        request.send();
        request.onreadystatechange = function(){
            if(request.status==200 && request.readyState == 4){
                console.log("响应的结果" + request.responseText)
            }
        }
    }
</script>
</body>
    <input type="button" value="跨域调用" onclick="fun1()">
</html>

index2.html文件：

<meta charset="utf-8">
<p>我是index2</p>

此时，可以开启node服务，
在当前文件目录终端下输入：node. index.js
在这里插入图片描述
访问 http://localhost:8082/ 显示

我是index2

在这里插入图片描述
访问 http://localhost:8082/index 显示

在这里插入图片描述
此时点击按钮，会发生跨域问题：

在这里插入图片描述

此时跨域问题准备好了，我们准备解决方法。

Nginx配置

打开nginx.conf文件
修改配置：

server {
        listen       8000;
        server_name  localhost;
       # / 表示匹配路径为/的url
        location / {
           proxy_pass http://localhost:8082;
        }
 
        # /user 表示访问以/user 开头 的地址 如/username,/user/find等
        location /user {
           proxy_pass http://localhost:3000;
        }
 
    }

上面代码的意思是,

把访问localhost:8000 转换成访问 localhost:8082
，
而访问localhost:8000/user…则转换成localhost:3000/user

保存后，双击nginx.exe
在这里插入图片描述
（如果一闪而过，在任务管理器有nginx.exe就可以了，就算运行成功。）

在这里插入图片描述

修改访问地址

打开index.html文件

将
request.open("GET","http://localhost:3000/user/find")
改为
request.open("GET","http://localhost:8000/user/find")

此时已配置完成，已经解决了跨域问题了。

测试

打开http://localhost:8000/ ，访问的是 localhost:8082
在这里插入图片描述

打开http://localhost:8000/index ，访问的是localhost:8082/index
在这里插入图片描述
此时点击按钮，访问的是http://localhost:8000/user/find，其实访问的是http://localhost:3000/user/find

在这里插入图片描述

此时可以成功访问了！！！

参考：

node+express的html页面访问
一篇文章让你搞懂如何通过Nginx来解决跨域问题
nginx解决跨域问题

不凡而大米、
关注
专栏目录
Nginx 代理解决跨域问题分析
qigeminghao的博客
01-18 2548
当你遇到跨域问题，不要立刻就选择复制去尝试。请详细看完这篇文章再处理 。我相信它能帮到你。 分析前准备： 前端网站地址：http://localhost:8080 服务端网址：http://localhost:59200 首先保证服务端是没有处理跨域的，其次，先用postman测试服务端接口是正常的 当网站8080去访问服务端接口时，就产生了跨域问题，那么如何解决？接下来我把跨域遇到的各种情况都列举出来并通过nginx代理的方式解决（后台也是一样的，只要你理解的原理）。 跨域主要涉及4个响.
1-1-零基础玩转Nginx到高可用架构实战专辑导读
xdclass的博客
10-22 253
HI,欢迎来到Open1024 -架构小分队，我是本专辑作者: 二当家小D 这个是我的个人博客，接下来会持续输出多个技术原创文章，欢迎大家持续关注我。 1）本专辑介绍 千万级连接-高性能服务器 Nginx专题是针对中高级工程师而定制的，从零基础讲解反向代理服务器到阿里云ECS+本地Linux虚拟机部署Nginx，玩转核心配置和面试题，超多经典案例实战+分布式高可用架构 2）适合人员： 后端开发工程师-中高级工程师 前端开发工程师-中高级工程师 技术leader或者架构师 运维工程师 3）在本专辑中，会讲
Nginx 解决跨域问题
weixin_43740223的博客
10-27 787
Nginx 解决跨域问题 Cross-Origin Resource Sharing nginx.conf 文件中的具体server块中添加如下内容 http { server { listen 80; server_name localhost; #允许跨域请求的域，*代表所有 add_header 'Access-Control-Allow-Origin' *; #允许带上cookie请求 add_header 'Access-C
使用 Nginx 轻松处理跨域请求（CORS）
MenzilBiz的博客
10-18 1247
CORS（Cross-Origin Resource Sharing）是一种 HTTP 头部机制，允许服务器声明哪些外部域（origin）可以访问其资源。由于安全原因，浏览器通常不允许跨域请求，但通过 CORS，服务器可以显式地允许某些域访问其资源。
Nginx 跨域
海贼懒懒
04-30 936
具体过程参考：https://blog.csdn.net/qq_35720307/article/details/89680726 server { listen 80 default_server; server_name _; add_header Access-Control-Allow-Credentials t...
Nginx轻松搞定跨域问题
Stestack的博客
02-28 2305
如果不加上content-type，则会报如下错误。意思就是预请求响应头Access-Control-Allow-Headers中缺少头信息authorization（各种情况会不一样，在发生跨域后，在自定义添加的头信息是不允许的，需要添加到请求响应头Access-Control-Allow-Headers中，以便浏览器知道此头信息的携带是服务器承认合法的，我这里携带的是authorization，其他的可能是token之类的，缺什么加什么），知道了问题所在，然后修改配置文件，添加对应缺少的部分，再试试。
Nginx 轻松搞定跨域问题
方志朋的博客
05-31 954
点击关注公众号，Java干货及时送达????当你遇到跨域问题，不要立刻就选择复制去尝试。请详细看完这篇文章再处理 。我相信它能帮到你。分析前准备：前端网站地址：http://localhost:8080服务端网址：http://localhost:59200首先保证服务端是没有处理跨域的，其次，先用postman测试服务端接口是正常的当网站8080去访问服务端接口时，就产生了跨域问题，那么如何解决？接下...
Nginx详细讲解-对nginx进行讲解PDF
最新发布
11-16
一句话搞懂nginx如何使用以及工作逻辑对于程序员来说是必不可少的! 我们看看本文的大纲先了解一下本文都讲了哪些东西，大纲如下: 1. nginx 介绍 2.nginx目录一览 3.nginx.conf 文件解读 4. location 路由匹配规则 5....
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3951
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Nginx实战部署常用功能演示(超详细版)，绝对给力~~~
zyq025的专栏
06-03 401
前言 上次分享了一些开发过程中常用的功能，但如果到真实环境中，其实还需要一些额外的配置，比如说跨域、缓存、配置SSL证书、高可用等，老规矩，还是挑几个平时比较常用的进行演示分享。上篇详见Nginx超详细常用功能演示，够用啦~~~。 正文 1. 跨域 跨域是因为浏览器同源策略的保护，不能直接执行或请求其他站点的脚本和数据；一般我们认为的同源就是指协议、域名、端口都相同，否则就不是同源。 现在前后端分离开发已经很普遍了，跨域问题肯定少不了，但解决的方式也很多，比如JsonP、后端添加相关请求头等；很多
docker+nginx+node+jenkins从零开始部署你的前端服务
广兰路地铁的博客
03-02 3240
前言 如果你不甘于做一个纯粹的页面仔，想了解一个web应用从编写到到发布到用户可见的全过程，或是想自己玩一点新东西，突破原有的技术圈层，那么本文将是一个很好的入门指南。笔者将从实战入手，尽可能细致地结合当前主流的工具链，以命令行为粒度来讲解一个web应用CI/CD的全过程。有些部分的内容可能过于基础，大神们可以酌情跳过。 本例的应用架构大致是:一个web静态中台服务，和与之配套的后端服务（通过no...
nginx解决跨域问题
smile_team的博客
05-13 380
使用nginx解决跨域问题 注意点 最简单的解决方法，就是把浏览器设为忽略安全问题，设置–disable-web-security。不过这种方式开发PC页面到还好，如果是移动端页面就不行了 例子 原先： 调试页面是：http://192.168.1.100:8080/ 请求的接口是：http://ni.hao.sao/api/get/info 步骤一： 请求的接口是：http://192.168.1.100:8080/api/get/info 改步骤即可解决跨域问题 步骤二： 安装好Nginx后，去
使用Nginx解决跨域问题
乐亦亦乐的博客
08-29 348
什么是跨域？ 产生的原因？ 同一域名不同端口是不可以通信的。 解决方案： 什么是跨域 跨域请求针对浏览器的同源策略(Same-Origin Policy)而言，指一个网站主动请求另外一个网站的资源(图片、javascript、视频等)。 同源策略要求网站只能有限制的访问外部网站的资源，不合法的请求会被拦截。网站的源由协议、域名、端口三部分组成，有一部分不同就被视为不同源，两个不同的域名即便指向同一个ip地址也是跨域的。网站通过AJAX(...
使用nginx解决跨域问题
weixin_45371730的博客
08-22 4003
前端h5项目使用nginx解决跨域问题
nginx 跨域
pf1234321的专栏
10-16 215
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;style&gt;     body {         width: 35em;         margin: 0 auto;         font-family: Tahoma,...
nginx跨域
热门推荐
OfficerGoodbody的博客
09-02 1万+
1.跨域解释 1.1 怎么知道我遇到了跨域问题 如果项目没做前后端分离，是不会有跨域问题的。前后端分离的项目中，前端调用后台服务时，报错 No 'Access-Control-Allow-Origin' header is present on the requested resource，你就是遇到了跨域问题。另外，前端调试强烈推荐使用chrome，使用QQ浏览...
通过nginx解决跨域问题，并测试
徐同保的专栏
05-30 2603
通过nginx解决跨域问题，并测试
vue 使用nginx解决跨域问题
09-22
在Vue中使用Nginx解决跨域问题的方法如下： 1. 在Nginx的配置文件中添加以下代码： ``` location /api { proxy_pass http://localhost:3000; // 将请求转发到后端服务器的地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ``` 这里的`/api`是代理的路径，你可以根据自己的实际情况进行修改。 2. 修改Vue的配置文件`vue.config.js`，添加以下代码： ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:80', // 将请求代理到Nginx的地址 ws: true, changeOrigin: true } } } }; ``` 这里的`/api`也需要与Nginx配置文件中的路径保持一致。 通过以上配置，Vue将会把以`/api`开头的请求代理到Nginx服务器上，从而解决跨域问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值