前端ajax跨域处理

最新推荐文章于 2024-08-14 16:49:42 发布

Li_na_na01

最新推荐文章于 2024-08-14 16:49:42 发布

阅读量764

点赞数

分类专栏： nodeJs 文章标签：前端 ajax nodejs proxy

本文链接：https://blog.csdn.net/Li_na_na01/article/details/122072310

版权

nodeJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前情

后端给的接口在浏览器中可以拿到返回值，由于浏览器的同源策略，在项目中使用ajax报跨域。
同源策略这里不多说，具体说一下怎么解决。

用nodeJs做代理

1. 初始化项目

创建一个空文件夹，在文件夹下

npm init

所有选项默认即可

2. 启动一个express项目

安装express

npm i express -s

在根目录下创建index.js文件

// index.js
const express = require('express')
const app = express()
const port = 5000
app.get('/', (req, res) => {
    return res.send('Hello')
})
app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

启动项目

node index.js

查看效果
浏览器效果截图
浏览器中出现刚才send的内容，表示启动成功

3. 托管静态文件

项目根目录下创建public文件夹，放入自己的静态文件

// index.js
app.use(express.static('public'))

<!--public/testAjax.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>123</div>
</body>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
  $.ajax({
    url: "https://www.xxxx.cn/api/apk/app/abc.json",
    type: "GET",
    success: (data) => {
      console.log(data);
    }
  })
</script>
</html>

此时页面正常显示，但是接口是跨域的
页面效果截图

4. 处理跨域

安装http-proxy-middleware

npm i http-proxy-middleware -s

使用中间件

// index.js
const {createProxyMiddleware} = require('http-proxy-middleware')
app.use('/api', createProxyMiddleware({
    target: 'https://www.xxxx.cn',
    changeOrigin: true,
    pathRewrite: {
        '^/api': ''
    }
}));

修改ajax

$.ajax({
    url: "/api/apk/app/abc.json",
    type: "GET",
    success: (data) => {
      console.log(data);
    }
  })

重启node，查看效果
接口成功截图
接口成功返回数据，代理成功

最终代码

// index.js
const express = require('express')
const {createProxyMiddleware} = require('http-proxy-middleware')
const app = express()
const port = 5000

app.get('/', (req, res) => {
    return res.send('Hello')
})
app.use('/api', createProxyMiddleware({
    target: 'https://www.xxxx.cn',
    changeOrigin: true,
    pathRewrite: {
        '^/api': ''
    }
}));
app.use(express.static('public'))
app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

<!--public/testAjax.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>123</div>
</body>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
  $.ajax({
    url: "/api/apk/app/abc.json",
    type: "GET",
    success: (data) => {
      console.log(data);
    }
  })
</script>
</html>