http-proxy-middleware实现跨域；还有直接使用proxy跨域，不通过中间件

最新推荐文章于 2024-08-09 07:19:33 发布

热爱前端的小君同学

最新推荐文章于 2024-08-09 07:19:33 发布

阅读量7.9k

点赞数 4

分类专栏：跨域

本文链接：https://blog.csdn.net/qq_37815596/article/details/109757249

版权

跨域专栏收录该内容

1 篇文章 1 订阅

订阅专栏

一、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;

二、直接使用proxy跨域，不通过中间件

在package.json下配置，具体如下

"proxy": "http://api.xxxx.com"

这个地址是npm start启动时候，显示在页面的地址，也就是我们打开该项目的地址

https://blog.csdn.net/jason_renyu/article/details/104640965

https://www.cnblogs.com/crazycode2/p/9757236.html

umi创建的项目，直接自带proxy.js文件，可以跟上需要跨域的地址就行

export default {
  dev: {
    '/permission/': {
      target: 'http://localdev:9050/',
      changeOrigin: true,
      pathRewrite: {
        '^': '',
      },
    },
    '/media/': {
      target: 'http://localdev:9050/',
      changeOrigin: true,
      pathRewrite: {
        '^': '',
      },
    },
  },
 test: {
    '/api/': {
      target: 'https://preview.pro.ant.design',
      changeOrigin: true,
      pathRewrite: {
        '^': '',
      },
    },
  },
};