vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?

简介: vue2_vite.config.js的proxy跨域配置和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反向代理后端端口地址

结束

感谢阅读,如有不足欢迎指出!


目录
相关文章
|
4天前
|
应用服务中间件 nginx
Nginx 配置,自定义日志格式 log_format
Nginx 配置,自定义日志格式 log_format
12 0
|
8天前
|
Java Serverless 应用服务中间件
Serverless 应用引擎产品使用合集之Web函数启动的Spring Boot项目可以通过什么方式配置Nginx
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
14天前
|
应用服务中间件 Linux nginx
|
14天前
|
网络协议 安全 应用服务中间件
阿里云申请免费ssl证书并配置nginx
阿里云申请免费ssl证书并配置nginx
|
14天前
|
网络协议 安全 应用服务中间件
阿里云 网站https设置 sll申请与nginx跳转配置
阿里云 网站https设置 sll申请与nginx跳转配置
|
29天前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
|
29天前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400(2)
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400(2)
|
29天前
|
前端开发 JavaScript API
前端 JS 经典:Proxy 和 DefineProperty
前端 JS 经典:Proxy 和 DefineProperty
19 0
|
30天前
|
负载均衡 安全 应用服务中间件
nginx配置ssl和反向代理的配置代码
【5月更文挑战第2天】nginx配置ssl和反向代理的配置代码
57 3
|
1月前
|
负载均衡 应用服务中间件 nginx
解决nginx配置负载均衡时invalid host in upstream报错
在Windows环境下,配置Nginx 1.11.5进行负载均衡时遇到问题,服务无法启动。错误日志显示“invalid host in upstream”。检查发现上游服务器列表中,192.168.29.128的主机地址无效。负载均衡配置中,两个服务器地址前误加了&quot;http://&quot;。修正方法是删除上游服务器列表和proxy_pass中的&quot;http://&quot;。问题解决后,Nginx服务应能正常启动。
74 4
解决nginx配置负载均衡时invalid host in upstream报错