vue2

2023-04-02 19:11| 来源: 网络整理| 查看: 265

文章目录背景vite.config.js配置代理跨域鼻祖 jsonpvue 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去获取跨域请求内容简陋版

// 前端部分 // 1 callback // 2 后端 callbackName(数据) function onResponse(posts) { console.log(posts); } // 前端没有调用 //后端部分 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中执行） 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!") })

如下是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反向代理后端端口地址

结束

感谢阅读，如有不足欢迎指出！在这里插入图片描述

【本文地址】

vue2

vue2

今日新闻

推荐新闻