请求数据出现跨域问题。本地启动两个端口号,一个脚手架搭建的前端,一个用node启动的后台服务。

问题描述:

本地启动两个服务,一个前台,一个后台,访问的时候出现跨域问题。

请求跨域结果如下:

Access to XMLHttpRequest at 'http://localhost:5000/users/api/login.do' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决办法:

可以在前端页面package.json 里面配置一个代理服务器。如下:

【package.json】文件添加如下代码:

"proxy":"http://localhost:5000"

页面上的请求域名,设置为空。代码如下:

这样,基本上就配置好了。

重新启动项目,npm start 运行,再次去请求,就不会出现跨域的问题啦。

------完。

跨域问题是由于浏览器的同源策略导致的,即不允许在一个域名下的页面去访问另一个域名下的资源。为了解决跨域问题,可以通过搭建本地一个服务器来实现。 一种常见的做法是使用Node.js搭建一个本地服务器。具体步骤如下: 1. 首先,在本地安装Node.js,确保已经安装了npm包管理工具。 2. 创建一个项目文件夹,进入该文件夹,并打命令行工具。 3. 在命令行中使用npm初始化项目,生成一个package.json文件,命令如下: ``` npm init ``` 4. 使用npm安装一个简单的HTTP服务器,例如express库,命令如下: ``` npm install express --save ``` 5. 在项目文件夹下创建一个JavaScript文件(例如server.js),使用express库创建一个简单的服务器,代码如下: ```javascript const express = require('express'); const app = express(); const port = 3000; app.get('/api/data', (req, res) => { // 接收GET请求,返回需要的数据 res.send('跨域问题解决方案'); }); app.listen(port, () => { console.log(`服务器运行在 http://localhost:${port}`); }); ``` 6. 在命令行中启动服务器,命令如下: ``` node server.js ``` 7. 本地服务启动成功后,可以通过访问"http://localhost:3000/api/data"来获取服务器上的资源。 通过搭建本地服务器后,在跨域请求时,可以将请求发往本地服务器,然后本地服务器再去请求目标资源,并把请求结果返回给客户端,实现跨域资源的获取。 需要注意的是,这种解决方案并不适用于真实的生产环境,主要用于发和测试阶段。在真实环境中,可以通过配置服务器的响应头来允许跨域访问,或使用代理服务器等其他方式来解决跨域问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬不萌只是酸i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值