解决vue本地跨域问题-简单nginx配置跨域

解决vue本地跨域问题-简单nginx配置跨域

1、config/index.js下添加proxyTable

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        // "/api/*":{
        //   //代理的目标
        //   target:"http://XXX.224.135.xx:9456",
        //   //重新路径
        //   pathRewrite:{"/api":"/"},
        //   //是否允许跨域
        //   changeOrigin:true,
        // },
        '/Systemmanage': {
          target: "http://XXX.224.135.xx:9456",
          changeOrigin: true,
        },
        '/Userprofile': {
          target: "http://XXX.224.135.xx:9456",
          changeOrigin: true,
        }
    },

配置完成后，重启项目测试接口，查看是否代理成功

2.nginx简单配置（↓）

server {
        listen 443 ssl; #配置HTTPS的默认访问端口号为443。
        server_name http://www.xxxxxx.cn:9988; #将https://www.xxxxxx.cn:9988修改为您证书绑定的域名。
        charset utf-8;
        ssl_certificate /etc/nginx/xxxxx.pem;  #证书的文件名称。
        ssl_certificate_key /etc/nginx/conf.d/xxxxx.key; #证书的密钥文件名称。
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #使用此加密套件。
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #使用该协议进行配置。
        ssl_prefer_server_ciphers on;
        #开启和关闭gzip模式
        gzip on;

        #gizp压缩起点，文件大于1k才进行压缩
        gzip_min_length 1k;

        # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
        gzip_comp_level 5;

        # 进行压缩的文件类型。
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;

        #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
        gzip_static on;

        # 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;

        # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
        gzip_buffers 4 16k;

        # 设置gzip压缩针对的HTTP协议版本
        gzip_http_version 1.1;

         location / {
             root   /usr/share/nginx/html/dig; 
             index  pages/homepage.html;
         }
         #匹配url
         location ~ (api|user_manage)/ {
            proxy_pass https://www.xxxxxx.cn:9988;
            proxy_redirect off;
            proxy_set_header Host $host:8000;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
            location /user {
            proxy_pass https:https://www.xxxxxx.cn:9988;
            proxy_redirect off;
            proxy_set_header Host $host:8000;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    	location /file {
            proxy_pass https://www.xxxxxx.cn:9988;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            client_max_body_size 100M;
            proxy_temp_file_write_size 10M;
            client_body_buffer_size  256k;
		    proxy_connect_timeout    1200;
		    proxy_read_timeout       1200;
		    proxy_send_timeout       6000;
		    proxy_buffer_size        32k;
		    proxy_buffers            4 64k;
		    proxy_busy_buffers_size  128k;
	        expires                  2d;
    	}

    	location /applicant {
            proxy_pass https://www.xxxxxx.cn:9988;
            client_max_body_size 100M;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    	}
}

server {
        listen 80;
        server_name  https://www.xxxxxx.cn;
        #告诉浏览器有效期内只准用 https 访问
        add_header Strict-Transport-Security max-age=15768000;
        #永久重定向到 https 站点
        return 301 https://$server_name$request_uri;
}

server {
        listen 80;
        server_name  xxxxx;
        location / {
           proxy_pass http://39.xxx.xxx.xxx:8000;
           proxy_set_header Host $host; 
	}
}

线上代理需使用nginx发布并代理！！！