nodeJS跨域的解决方法

浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域,这是浏览器的安全机制造成的,也被成为同源问题。
那么,如何解决跨域呢?
1、采用jsonp方法解决跨域,利用script标签,用script标签加载资源是没有跨域问题的,通过script标签的一个src属性加载(包含指定的外部文件),可以跨域包含 ,被包含的资源可以是任何类型的文件(可以是txt,php等)
2、在服务器端利用nodejs设置头文件header来解决跨域,实例代码如下:
const http = require(“http”);
http.createServer((req,res)=>{
res.setHeader(“Access-Control-Allow-Origin”, “*”);
res.setHeader(“Access-Control-Allow-Headers”, “Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild”);
res.setHeader(“Access-Control-Allow-Methods”,“PUT,POST,GET,DELETE,OPTIONS”);
res.setHeader(“X-Powered-By”,’ 3.2.1’);
res.setHeader(“Content-Type”, “application/json;charset=utf-8”);
自己的逻辑代码
3、在nodejs中利用CORS来处理跨域问题
但我们用ajax去请求数据发生跨域时,用nodejs在后台写一个服务器代理,首先是ajax请求时先去访问我们服务器代理,而不是访问你的最终的目标地址
$.post(‘服务器代理地址’, {
url:
‘目标地址’,
}).then(function(res) {
console.log(res);//返回的数据
});
然后在服务器代理中利用CORS解决跨域问题
//这个文件就是一个单独的专门用来做服务器代理解决跨域的,你只要运行这个文件将这个服务器打开就行了
//若遇到跨域访问获取数据时先访问这个服务器地址就行
const express = require(“express”);
const cors = require(“cors”);
const { get } = require(“axios”).default; //利用axois发送个网络请求
const app = express();
app.use(cors()); //就这一部就已经解决了跨域
//如果访问的是本地服务器,现在这步就相当于已经解决了跨域问题
//如果访问其他地址的服务器,那么此处就相当于一个服务器代理,解决跨域问题
app.use(express.json());
app.use(express.urlencoded());
//服务器的代理请求地址
app.post("/proxy", async(req, res) => {
const result = await get(req.body.url); //这里相当于发了一个网络请求,这不存在跨域,就像你在浏览器中直接输入请求的地址一样
res.json({
code: 1,
info: result.data,//axios请求的数据放在返回数据的data属性中
});
});
app.listen(3003, () => {
console.log(“本地代理服务器运行在3003端口”);
});

发布了1 篇原创文章 · 获赞 0 · 访问量 4

猜你喜欢

转载自blog.csdn.net/weixin_45537076/article/details/104466002