文章目录
- 背景
- vite.config.js配置代理
- 跨域鼻祖 jsonp
- vue proxy用了jsonp吗（并不是）
- vue项目中的node开启了web服务器代理转发了请求
- nginx代理
- 结尾
- 结束
背景
vue的项目在开发到生产上线的初期最容易遇到的问题就是跨域。浏览器安全机制导致的，配置api代理只是本地的，所以经常需要再服务器的nginx做一个后端接口的nginx反向代理
vite.config.js配置代理
简单粗暴的看下vue2的配置
个人项目网站的配置如下
webpack的配置
proxyTable: {
"/api/": {
target: "https://yongma16.xyz/", //后端接口地址
ws: true, //接受websocket请求
changeOrigin: true, //是否允许跨越
chunkOrigins: true,
pathRewrite: {
"^/api": "api", //重写,
},
},
"/ws_api/": {
target: "wss://yongma16.xyz/ws/webchat/",
ws: true, //接受websocket请求
changeOrigin: true, //是否允许跨越
chunkOrigins: true,
pathRewrite: {
"^/ws_api": "", //重写,
},
},
}vue.config.js的配置
proxy: {
"^/cloudApi/": {
target: "https://yongma16.xyz/back-front",
// target: "http://localhost:9090/",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/cloudApi/, ""),
},
},
跨域鼻祖 jsonp
经常写html 我们知道拿个src可以跨域
没错，JSONP实现跨域就是通过html的标签的src去获取跨域请求内容
简陋版
// 前端部分
<script>
// 1 callback
// 2 后端 callbackName(数据)
function onResponse(posts) {
console.log(posts);
}
// 前端没有调用
</script>
<!-- 后端返回结果 -->
<!-- 调用 -->
<script src="http://localhost:9090/api"></script>//后端部分
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/api') {
let posts = ['js', 'php'];
res.end(`onResponse(${JSON.stringify(posts)})`);
}
})
.listen(9090, () => {
console.log(9090)
})前端json p的跨域
// 前端（代码放在body中执行）
<script>
function jsonp(url, options) {
// 超时处理
const { timeout } = options;
return new Promise((resolve, reject) => {
// 防止函数名冲突
let funcName = `jsonp${Date.now()}`;
let time = null, scriptNode;
// 定义callback
window[funcName] = function(data) {
if (timeout) clearTimeout(time);
resolve(data);
// 很重要的性能优化点
// 清除本次请求产生的回调函数和script标签
delete window[funcName];
document.body.removeChild(scriptNode);
}
// 创建script标签
scriptNode = document.createElement('script');
// 给script标签添加src属性
scriptNode.src = `${url}?callback=${funcName}`;
// 发出请求
document.body.appendChild(scriptNode);
time = setTimeout(() => {
reject('network err, timeout')
}, timeout)
// 失败
scriptNode.onerror = function(err) {
reject(err);
}
})
}
jsonp('http://localhost:9090/api', {
callBack: 'res1',
// 超时处理
timeout: 3000
})
// 请求成功
.then(res => {
console.log('jsonp->', res);
})
// 请求失败
.catch(err => {
console.log("network err!")
})
</script>如下是ajax封装之后的调用
$.ajax({
url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",
dataType: "jsonp",
jsonp: "callback",
context: document.body,
success: function(data) {
console.log(data);
}
});ok，那么axios也可以使用jsonp产生跨域
譬如
axios.jsonp = (url,data)=>{
if(!url)
throw new Error('url is necessary')
const callback = 'CALLBACK' + Math.random().toString().substr(9,18)
const JSONP = document.createElement('script')
JSONP.setAttribute('type','text/javascript')
const headEle = document.getElementsByTagName('head')[0]
let ret = '';
if(data){
if(typeof data === 'string')
ret = '&' + data;
else if(typeof data === 'object') {
for(let key in data)
ret += '&' + key + '=' + encodeURIComponent(data[key]);
}
ret += '&_time=' + Date.now();
}
JSONP.src = `${url}?callback=${callback}${ret}`;
return new Promise( (resolve,reject) => {
window[callback] = r => {
resolve(r)
headEle.removeChild(JSONP)
delete window[callback]
}
headEle.appendChild(JSONP)
})
}ok，相信到这，我们可能会猜想vue.config的proxy代理是否页用了jsonp，去看看！
vue proxy用了jsonp吗（并不是）
ctrl点击去查看源代码，走你
哦吼，看见只是他的类型定义。
不急，咋们已经看见这是axios的拦截配置项了。
走去axios一探究竟！
axios是基于promise的网络请求库，由node发起请求。
http的Proxy包括协议 域名 端口
我们找到的是http的服务代理，node开一个web服务器去代理请求，所以不是jsonp
vue项目中的node开启了web服务器代理转发了请求
export class Server extends events.EventEmitter {
/**
* Creates the proxy server with specified options.
* @param options - Config object passed to the proxy
*/
constructor(options?: ServerOptions)
/**
* Used for proxying regular HTTP(S) requests
* @param req - Client request.
* @param res - Client response.
* @param options - Additional options.
*/
web(
req: http.IncomingMessage,
res: http.ServerResponse,
options?: ServerOptions,
callback?: ErrorCallback,
): void
/**
* Used for proxying regular HTTP(S) requests
* @param req - Client request.
* @param socket - Client socket.
* @param head - Client head.
* @param options - Additional options.
*/
ws(
req: http.IncomingMessage,
socket: unknown,
head: unknown,
options?: ServerOptions,
callback?: ErrorCallback,
): void
/**
* A function that wraps the object in a webserver, for your convenience
* @param port - Port to listen on
*/
listen(port: number): Server
/**
* A function that closes the inner webserver and stops listening on given port
*/
close(callback?: () => void): void
/**
* Creates the proxy server with specified options.
* @param options - Config object passed to the proxy
* @returns Proxy object with handlers for `ws` and `web` requests
*/
static createProxyServer(options?: ServerOptions): Server
/**
* Creates the proxy server with specified options.
* @param options - Config object passed to the proxy
* @returns Proxy object with handlers for `ws` and `web` requests
*/
static createServer(options?: ServerOptions): Server
/**
* Creates the proxy server with specified options.
* @param options - Config object passed to the proxy
* @returns Proxy object with handlers for `ws` and `web` requests
*/
static createProxy(options?: ServerOptions): Server
addListener(event: string, listener: () => void): this
on(event: string, listener: () => void): this
on(event: 'error', listener: ErrorCallback): this
on(
event: 'start',
listener: (
req: http.IncomingMessage,
res: http.ServerResponse,
target: ProxyTargetUrl,
) => void,
): this
on(
event: 'proxyReq',
listener: (
proxyReq: http.ClientRequest,
req: http.IncomingMessage,
res: http.ServerResponse,
options: ServerOptions,
) => void,
): this
on(
event: 'proxyRes',
listener: (
proxyRes: http.IncomingMessage,
req: http.IncomingMessage,
res: http.ServerResponse,
) => void,
): this
on(
event: 'proxyReqWs',
listener: (
proxyReq: http.ClientRequest,
req: http.IncomingMessage,
socket: net.Socket,
options: ServerOptions,
head: any,
) => void,
): this
on(
event: 'econnreset',
listener: (
err: Error,
req: http.IncomingMessage,
res: http.ServerResponse,
target: ProxyTargetUrl,
) => void,
): this
on(
event: 'end',
listener: (
req: http.IncomingMessage,
res: http.ServerResponse,
proxyRes: http.IncomingMessage,
) => void,
): this
on(
event: 'close',
listener: (
proxyRes: http.IncomingMessage,
proxySocket: net.Socket,
proxyHead: any,
) => void,
): this
once(event: string, listener: () => void): this
removeListener(event: string, listener: () => void): this
removeAllListeners(event?: string): this
getMaxListeners(): number
setMaxListeners(n: number): this
listeners(event: string): Array<() => void>
emit(event: string, ...args: any[]): boolean
listenerCount(type: string): number
}nginx代理
proxy代理请求，proxy_pass。
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location /api {
proxy_pass https://yongma16.xyz/api;
}
}
}结尾
vue和nginx都对请求做了一次转发
vue是基于客户端如windows
nginx是基于生产服务器的如centos
在打包前端项目到服务器的时候
由于前端是静态文件
产生协议域名端口的跨域时
需要用到nginx反向代理后端端口地址
结束
感谢阅读，如有不足欢迎指出！
