vue解决本地调试和发布后生产环境跨域的问题

文章已阅读次
 

1.解决本地环境调试跨域（前端代码使用代理）

1).在main.js中定义代理

1
Vue.prototype.dev_proxyname = '/api'

2).在index.js中定义代理地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
module.exports = {

  dev:{

    // Paths

    assetsSubDirectory: 'static',    

    assetsPublicPath:runPath,

    proxyTable: {

      changeOrigin: true,/*允许跨域*/

      "/api": {        

        target:"http://localhost:8090",//本地后台调试post

        secure:false,

        changeOrigin: true,   

        pathRewrite: {

          '^/api': ''

        }

      },

    },

.........

3)调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.$axios({

url: this.dev_proxyname + "/InsertBlog/AddBlog",
method: "post",
data: JSON.stringify(this.blog),
headers: { "Content-Type": "application/json" },
})
.then((res) => {
if (res.data) {
this.submmited = true;
}
})
.catch((err) => {
console.log(err);
});

这样便能解决本地调试 get或post跨域的问题。部署到生产线上仍然会产生：Cross-Origin 跨域的问题

注意

如果是在config>dev.env.js 中配置以下代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

/*配置测试环境下url*/
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"http://localhost:8090"' // 开发环境地址【可调试后端api】
 内容  
})

在config>prod.env.js 中配置以下代理

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"https://www.romanticlife.top:8090"' // 生产环境地址
 }

通过这种方式配置代理在使用axios post时无效…

2.解决生产环境跨域

需要在生产环境服务器nginx添加允许跨域的配置和反向代理。

本网站配置内容如下，以供参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
# nginx 常用命令
# taskkill /f /t /im nginx.exe    #kill 所有的nginx端口
# start nginx                     #开启 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;

    #这个配置的意思是就是：当请求：https://www.romanticlife.top:8090 时，就转发请求
    #当前服务器端口 5000，而这个端口正好是 .necore webapi发布后启动.exe 占用的端口
    #这就要求这个 exe软件需要打开，否则请求不到接口数据

server{
        listen 8090 ssl;#这里需要云服务器上开放8090端口；
        server_name  www.romanticlife.top;   
        ssl_certificate 1_www.romanticlife.top_bundle.crt;  # 指定证书的位置，绝对路径
        ssl_certificate_key 2_www.romanticlife.top.key;  # 绝对路径，同上
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
        ssl_prefer_server_ciphers on;    

         location /{
            #  如果nginx加了允许跨域的配置，那么.netcore api 就不需要加跨域配置（二者选其一）
            #  add_header 'Access-Control-Allow-Origin' *;	
		    #  add_header 'Access-Control-Allow-Methods' 'GET,HEAD,OPTIONS,POST,PUT';	
		    #  add_header 'Access-Control-Allow-Headers' 'DNT, X-Mx-ReqToken, Keep-Alive, User-Agent, X-Requested-With';	

            proxy_pass HTTP://localhost:5000;
            proxy_set_header Host $proxy_host; # 修改转发请求头，让8080端口的应用可以受到真实的请求
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
            }
      
        }
       
    server {
        listen 443 ssl;
        server_name  www.romanticlife.top;
        ssl_certificate 1_www.romanticlife.top_bundle.crt;  # 指定证书的位置，绝对路径
        ssl_certificate_key 2_www.romanticlife.top.key;  # 绝对路径，同上
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
        ssl_prefer_server_ciphers on;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            add_header 'Access-Control-Allow-Origin' *;	
		    add_header 'Access-Control-Allow-Methods' 'GET,HEAD,OPTIONS,POST,PUT';	
		    add_header 'Access-Control-Allow-Headers' 'DNT, X-Mx-ReqToken, Keep-Alive, User-Agent, X-Requested-With';	

            root   html\VueWeb;
            index  index.html index.htm;     

               location /api{          
                rewrite ^/api/(.*)$ /$1 break;
                proxy_pass HTTP://localhost:5000;
               }               
        }
        
        #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;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

这样也就解决了生产环境跨域的问题。

2022-10-13
浏览 次 |

© 2023 南疆 with help from Hexo and Twitter Bootstrap. Theme by Freemind.

container-narrow --> ▲