程序地带

http-proxy-middleware实现跨域


1、若你想要跨域的网址,能够在当前电脑通过链接访问,那么可以直接在本地新建如下这个文件夹。若你想要跨域的网址,不能够在当前电脑通过链接访问,那么需要在那个新建链接接口的电脑端新建如下这个文件夹


2、新建文件夹,文件夹名字可以任意命名,然后在文件夹内新建一个js文件,文件名字可以任意


文件例如新建为setupProxy.js


const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
const app = express();
//设置跨域访问
app.all("*", function (req, res, next) {
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin", "*");
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == "options") res.send(200);
//让options尝试请求快速结束
else next();
});
app.use(
"/api",
createProxyMiddleware({
target: "http://192.168.10.30:8080",
changeOrigin: true,
pathRewrite: {
"^/api": "", // rewrite path
},
})
);
//这个链接是目标链接是我随便从网上找的一个
app.listen(3000); //这个端口号就是proxy运行的端口号

3、然后在文件夹目录下执行如下代码,安装包


npm install express
npm install http-proxy-middleware

4、在文件目录下执行


npm init -y
node setupProxy.js

通过node将后台跑起来


5、然后在前端网页内获取


在我的前端项目文件夹内,有一个页面需要执行跨域请求(注意:这个前端代码文件夹和上面的包含setupProxy.js的文件夹不是同一个)


import './App.css';
import React , { Component } from 'react'
class App extends Component{
componentDidMount(){
//get请求
fetch("http://localhost:3000/api/index/queryPictureList")//这里是node运行的IP地址
      .then(res => res.json())
      .then(res => {
        console.log(res)
      })
}
//post请求需要加上一些参数
// fetch('http://192.168.8.112:3000/api',{method:'post',body:...})
//       .then(res => res.json())
//       .then(res => {
//         console.log(res)
//       })
// }
render() {
return (
<div className="App">
123
</div>
);
}
}
export default App;

 


 


 


 


 


 


 


 


 


 


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37815596/article/details/109757249

随机推荐

Hadoop入门系列(2)-安装Hadoop

Hadoop入门系列(2)-安装Hadoop

安装JDK1.8#查询yumsearchjava|grepjdk#安装yuminstall-yjava-1.8.0-openjdk#查看版本java-version单节点安装下载压缩包mkdir-p/...

云烟成雨csdn 阅读(735)

mongodb 去重多字段_MongoDB笔记

mongodb 去重多字段_MongoDB笔记

MongoDBMongoDB属于NoSQL。在MongoDB中,一个db(对应MySQL的db)包含若干collection(对应MySQL的table),一个collec...

weixin_39669982 阅读(287)

剑指offer JZ6旋转数组的最小数字

题目描述把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素。NOTE:给出的所有元素...

UESTC-于洪涛 阅读(696)

Error:Java不支持发行版本5

Error:Java不支持发行版本5

今天使用Java连接redis时,出现错误:ERROR:Java不支持发行版本5解决:确保下图中两个红色方框内的版本一样即可:...

爱你我已不再是幼稚的少年 阅读(585)