跨域解决方案:
-
后端接口打包到本地运行（缺点：每次后端更新都要去测试服下一个更新包，还要在本地搭建运行环境）
-
CORS跨域：后端接口在返回的时候，在header中加入'Access-Control-Allow-origin':* 之类的（有的时候后端不方便这样处理, 或因为安全问题不能开启）
-
webpack-dev-server配置跨域方案, 在用webpack作为前端自动化构建工具的话, 里面有个proxy, 专门用于配置代理请求接口的, 这种方案最方便.
-
用nodejs搭建本地http服务器，并且判断访问接口URL时进行转发，完美解决本地开发时候的跨域问题。
-
使用谷歌的插件解决:https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
-
或者谷歌开启允许跨域,参考 http://camnpr.com/archives/chrome-args-disable-web-security.html
-
本地使用nginx作为接口转发
本文将讲解方案4和方案7
- 方案4
本文用到的技术
- nodejs搭建本地http服务器
- 应用node-http-proxy 做接口url转发
-
proxy.js 文件为简单的url api转发调用, 对于一般的本地开发调试基本够用了
-
proxy_all.js 可以转发接口以及文件
项目准备
- npm初始化
npm init
- 安装node-http-proxy模块
npm install http-proxy --save-dev
- 项目结构
D:.
│ index.html
│ package-lock.json
│ package.json
│ proxy.js
│ proxy_all.js
│ README.md
│ service.js
│
└─node_modules
- 启动nodejs服务, 测试转发api
启动cmd, 定位到项目目录
node proxy.js
运行service.js 测试接口
node service.js
测试请求接口
在浏览器中请求http://localhost:8080/ 返回I'm service A则表示请求成功了.
- 启动nodejs服务, 测试转发html
node proxy_all.js
使用vscode并开启Live Server插件, 在vscode中打开index.html页面, 点击右下角Live Server图标即可在默认端口启动http://localhost:5500, 此处也是为了默认远程请求页面, 注意如果使用其他代理地址, 请修改下面的位置
var proxy = httpProxy.createProxyServer({
target: 'http://localhost:5500/', //接口地址, 根据自己的地址修改此处
// 下面的设置用于https
// ssl: {
// key: fs.readFileSync('server_decrypt.key', 'utf8'),
// cert: fs.readFileSync('server.crt', 'utf8')
// },
// secure: false
});
打开网页http://127.0.0.1:5500/index.html
打开网页http://localhost:3000/index.html
如果3000/index.html也能请求则说明该方法成功了.
- proxy.js
var http = require('http');
var httpProxy = require("http-proxy");
var PORT = 8080;
// var targetUrl = "http://xxx.xxx.com";
var targetUrl = "http://localhost:8000";
var proxy = httpProxy.createProxyServer({
changeOrigin: true,
ignorePath: false //ignorePath用于转发请求时，是否将原请求地址中的path附加到转发地址后面。
});
proxy.on("error", function (err, req, res) {
res.writeHead(500, {
'content-type': 'text/plain'
});
res.write("error!");
res.end();
});
proxy.on("proxyReq", function (proxyReq, req, res) {
console.log("url:" + proxyReq.path);
})
proxy.on("proxyRes", function (proxyRes, req, res) {
let host = proxyRes.req.getHeader("host");
let path = proxyRes.req.path;
console.log(host);
console.log(path);
})
var app = http.createServer(function (req, res) {
proxy.web(req, res, {
target: targetUrl
});
});
app.listen(PORT, function () {
console.info("server is running at %d, tip: this proxy_js only proxy url", PORT);
})
- proxy_all.js
var PORT = 3000;
var http = require('http');
var url = require('url');
var fs = require('fs');
// var mine=require('./mine.js').types;
var mine = {
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"js": "text/javascript",
"json": "application/json",
"pdf": "application/pdf",
"png": "image/png",
"svg": "image/svg+xml",
"swf": "application/x-shockwave-flash",
"tiff": "image/tiff",
"txt": "text/plain",
"wav": "audio/x-wav",
"wma": "audio/x-ms-wma",
"wmv": "video/x-ms-wmv",
"xml": "text/xml",
"woff": "application/x-woff",
"woff2": "application/x-woff2",
"tff": "application/x-font-truetype",
"otf": "application/x-font-opentype",
"eot": "application/vnd.ms-fontobject"
};
var path = require('path');
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({
target: 'http://localhost:5500/', //接口地址
// 下面的设置用于https
// ssl: {
// key: fs.readFileSync('server_decrypt.key', 'utf8'),
// cert: fs.readFileSync('server.crt', 'utf8')
// },
// secure: false
});
proxy.on('error', function (err, req, res) {
res.writeHead(500, {
'content-type': 'text/plain'
});
console.log(err);
res.end('Something went wrong. And we are reporting a custom error message.');
});
var server = http.createServer(function (request, response) {
var pathname = url.parse(request.url).pathname;
//var realPath = path.join("main-pages", pathname); // 指定根目录
var realPath = path.join("./", pathname);
console.log(pathname);
console.log(realPath);
var ext = path.extname(realPath);
ext = ext ? ext.slice(1) : 'unknown';
//判断如果是接口访问，则通过proxy转发
if (pathname.indexOf("mspj-mall-admin") > 0) {
proxy.web(request, response);
return;
}
fs.exists(realPath, function (exists) {
if (!exists) {
response.writeHead(404, {
'Content-Type': 'text/plain'
});
response.write("This request URL " + pathname + " was not found on this server.");
response.end();
} else {
fs.readFile(realPath, "binary", function (err, file) {
if (err) {
response.writeHead(500, {
'Content-Type': 'text/plain'
});
response.end(err);
} else {
var contentType = mine[ext] || "text/plain";
response.writeHead(200, {
'Content-Type': contentType
});
response.write(file, "binary");
response.end();
}
});
}
});
});
server.listen(PORT);
console.log("Server runing at port: " + PORT + ".");
- 方案7
在nginx.conf文件中添加location
location /proxy/ {
proxy_pass http://xxx.xxx.cn;
proxy_redirect default;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header Access-Control-Allow-Headers Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN,token;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_connect_timeout 60;
proxy_send_timeout 60;
proxy_read_timeout 60;
proxy_buffer_size 32k;
proxy_buffering on;
proxy_buffers 4 128k;
proxy_busy_buffers_size 256k;
proxy_max_temp_file_size 256k;
}
启动nginx并重载配置文件
> start nginx
> nginx -s reload
本文github地址:https://github.com/wwmin/http_proxy_node
网友评论