vue3+vite解决跨域

vite

//vite.config.js
  server: {
    port: '3000',
    open: false, //自动打开 
    base: "./ ", //生产环境路径
    proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
      // 正则表达式写法
      '^/api': {
        target: 'http://xxx.xxx.xxx.xxx:9999', // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

nginx

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8080;
        server_name  localhost;

        location / {
            try_files $uri $uri/ @router; #解决刷新后页面空白
            root   html;
            index  index.html index.htm;
            #  add_header 'Access-Control-Allow-Origin' '*';
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location @router{   #重点:这里用来进行重写操作, 对应上面的@router
						rewrite ^.*$ /index.html last;
			}
		location ~ /api/ {	#重点: api转发,转发到你的api发布地址
					rewrite /api/(.*)$ /$1 break;
                    proxy_pass http://xxx.xxx.xxx.xxx:8888;
			}


    include servers/*;
}