如何用代理解决api接口跨域问题

首先我们要了解跨域产生的原因：

域名、协议、端口有一个不同就会产生跨域，是浏览器的同源策略引起的
（所谓同源是指：域名、协议、端口相同。）

使用一个中间层来发请求。只需要前端来处理即可。

解决跨域的方式

解决跨域的方式有很多：JSONP、CORS、服务器代理、document.domain、window.name、location.hash、postMessage

主要说一下市面上常见的方式：代理

代理解决跨域：

这里是引用

自己写一套nodejs的中间层

通过这个中间层去请求，比如说猫眼（这里不会跨域）

前端代码再去请求这个中间层（这里会跨域，但是可以解决）

原理：客户端向中间层发送请求，中间层又向后端发送请求，后端将数据返回给中间层，中间层再把数据返回给前端。

中间层如何操作

以请求猫眼电影如下地址为例：

http://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=3AB8F27070A711EAB5F6EFED118239404C0B76B745824C469A76587DC457FAA1&optimus_risk_level=71&optimus_code=10

使用 nodejs 启动一个代理服务
下载引入http-proxy-middleware这样一个中间件

// 1. 引入 express
const express = require("express");// 2. 引入 http-proxy-middleware 。并结构出它里面的 createProxyMiddleware 这个函数
const { createProxyMiddleware } = require("http-proxy-middleware");// 3. 生成 express 实例
const app = express();app.use((req, res, next) => {res.set({"Access-Control-Allow-Origin": "*"});next();
});// 4. 调用代理中间件，确定一个前缀app.use("/api",createProxyMiddleware({// 配置选项// 目标地址, 只需要协议和主机。路径什么的不要target: "http://m.maoyan.com",// 路径重写pathRewrite: {"^/api": ""},changeOrigin: true})
);// end 监听端口
app.listen(3000, () => {console.log("代理服务启动成功");
});

//详解：
// 前端服务：http://localhost:8080
// 代理服务：http://localhost:3000
// 目标服务：http://m.maoyan.com// 前端服务 -> 代理服务 -> 目标服务
http://localhost:8080 -> http://localhost:3000/api/ajax/movieOnInfoList?token=&optimus_uuid=3AB8F27070A711EAB5F6EFED118239404C0B76B745824C469A76587DC457FAA1&optimus_risk_level=71&optimus_code=10 -> http://m.maoyan.com/api/ajax/movieOnInfoList?token=&optimus_uuid=3AB8F27070A711EAB5F6EFED118239404C0B76B745824C469A76587DC457FAA1&optimus_risk_level=71&optimus_code=10// 上述流程中，目标服务是不需要 /api 这个前缀的
// 这时还需要配置一个代理的路径重写规则   pathRewrite// 前端服务 -> 代理服务 -> 目标服务
// http://localhost:8080 -> http://localhost:3000/api/ajax/movieOnInfoList?token=&optimus_uuid=3AB8F27070A711EAB5F6EFED118239404C0B76B745824C469A76587DC457FAA1&optimus_risk_level=71&optimus_code=10 -> http://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=3AB8F27070A711EAB5F6EFED118239404C0B76B745824C469A76587DC457FAA1&optimus_risk_level=71&optimus_code=10

最后，前端再去请求“http://localhost:3000/api/ajax/movieOnInfoList?token=&optimus_uuid=3AB8F27070A711EAB5F6EFED118239404C0B76B745824C469A76587DC457FAA1&optimus_risk_level=71&optimus_code=10”这个地址即可。

如何用代理解决api接口跨域问题相关推荐

关于vue2用vue-cli搭建环境后域名代理的http-proxy-middleware解决api接口跨域问题
在vue中用http-proxy-middleware来进行接口代理,比如:本地运行环境为http://localhost:8080但真实访问的api为 http://www.baidu.com这时我 ...
通过设置Ionic-Cli代理解决ionic serve跨域调试问题
通过设置Ionic-Cli代理解决ionic serve跨域调试问题参考文章: (1)通过设置Ionic-Cli代理解决ionic serve跨域调试问题 (2)https://www.cnblog ...
解决常见接口跨域问题
解决常见接口跨域问题参考文章: (1)解决常见接口跨域问题 (2)https://www.cnblogs.com/RENQIWEI1995/p/7797269.html 备忘一下.
php跨域请求解决方案_解决TP接口跨域问题
首先在入口文件添加也就是public下的index.php目录下添加 // [ 应用入口文件 ] // 处理跨域需遇见请求 if(isset($_SERVER['REQUEST_METHOD'])& ...
Vue代理解决生产环境跨域问题
当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环 ...
Vue代理解决生产环境跨域问题部署必备干货
当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环 ...
niginx反向代理解决前后端跨域问题
1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...
【古法炮制】最原始的解决JAVA接口跨域的问题
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...
Vue Nginx反向代理配置解决生产环境跨域
Vue本地代理举例: module.exports = {publicPath: './',devServer: {proxy: {'/api': {target: 'https://movie.do ...