前端ajax跨域处理

前情

后端给的接口在浏览器中可以拿到返回值，由于浏览器的同源策略，在项目中使用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 = 5000app.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>

结束

具体写法官方文档中都写的很清楚，需要拓展功能可查阅文档
快速通道：
express官网
http-proxy-middleware

前端ajax跨域处理相关推荐

Ajax跨域：Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
「跨域」利用node.js实践前端各种跨域方式（上）
前言常言道,"读万卷书,不如行万里路".技术的学习也是如此,唯有实践才能更清楚的明白原理和加深印象,因此本文会利用node.js对前端的各种跨域方式进行实践,强烈建议一步一步跟着 ...
JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
ajax跨域，这应该是最全的解决方案了
前言从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见 ...
ajax跨域解决方案
一.什么是AJAX? Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 ...
前端常见跨域问题解决方案
前端常见跨域解决方案(全) 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: & ...
ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息方能实现. 此处手札供后人参 ...
ajax跨域时使得后台的sessionid不断地的变化，以及layui表格支持跨域的方法，java
java+ajax跨域sessionid不断变化由于实现一个功能,需要实现一个在过滤器中使用session的程序, 结果在前端使用ajax访问后台时,后台一直不能获取session存的值,导致了某一 ...
前端处理跨域的几种方式
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.资源跳转:A链接.重定向.表单提交 2.资源嵌入: <link>.<scr ...