当前位置: article > 正文

前端跨域主流解决方案（Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy）

作者：小蓝xlanll | 2024-02-15 15:49:15

踩

access to xmlhttprequest at

问题背景

前后端分开开发，由于浏览器本身的同源策略（服务端没有这个限制），导致了前端去访问服务端接口时会产生跨域。
经典报错：Access to XMLHttpRequest at ‘http…’ from origin ‘null‘ has been blocked by CORS policy

解决方案：

说明：目前网上的解决方案有9-10种，包括了：1.cors 2.node正向代理 3.nginx反向代理 4.JSONP 5.websoket 6.window.postMessage 7.document.domain + iframe 8.window.location.hash + ifame 9.window.name + ifame 10.浏览器开启跨域(终极方案) 参考：https://juejin.cn/post/6844904126246027278#heading-33

这里我就不写这么多了，毕竟很多基本上也用不到，就写目前公司主流的两种跨域解决方案

客户端：cors 服务端：cors
客户端：proxy 服务端：nginx

方式一：cors跨域

cors跨域主要是后台配置，只要后台实现了cors跨域，那么浏览器去请求接口就不会有跨域了。
以后台node为例，配置cors跨域：

const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors());
1
2
3
4

缺点：1.对后台要求高，需要后台懂cors跨域，且需要知道怎么配置安全性才高（配的不好就容易遭受攻击）。
优点：前端无需进行任何配置，后台配置一次，开发和线上环境都可以使用该接口

方式二：客户端：proxy 服务端：nginx

如果你的后台不愿意帮你配置cors，或者不太懂怎么配置，那么靠我们自己也是很快能解决的。
开发阶段：proxy
proxy解决跨域其实就是使用node正向代理。代表：vue和react框架
原理为：当我们使用vue或者react开发项目时，会使用npm run serve/npm start来启动项目，此时就是我们本机开启了一个服务端（与浏览器同源），而服务端和服务端发送请求是不跨域的，跨域只存在浏览器中。此时浏览器的消息发送路线如图

proxy常用配置：

module.exports = {
    // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
    devServer: {
      proxy: {
        '/yourapi': {   //代理api，/yourapi的意义在于，声明axios中url已/api开头的请求都适用于该规则，注意是以/yourapi开头，即：axios.post({url: '/yourapi/xxx/xxx'})
          target: 'yourserver',   //服务器真实api地址，即需要请求的目标接口，此处target的意义在于：造成跨域是因为访问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文
          pathRewrite: { 
               '^/yourapi': 'https://我是服务器/api'   //重写路径
        // 此处是大部分文章都不会明说的的地方，
        // 既然我们设置了代理，则所有请求url都已写成/yourapi/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
        // 因此这里的意义在于， 以 /yourapi开头的url请求，代理都会知道实际上应该请求那里，
        // ‘我是服务器/yourapi’，后面的/api根据实际请求地址决定，即我的请求url：/yourapi/test/test，被代理后请求的则是
        // https://我是服务器/yourapi/test/test
          } 
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

线上阶段：nginx
由于proxy只用于开发阶段，所以线上阶段一般是使用nginx来进行反向代理，其中的原理图如下：

跟正向代理的原理图很像是吧，这里我们需要了解一下正向代理和反向代理的区别：
1、位置不同
正向代理，架设在客户机和目标主机之间；（我们npm run serve就是在客户机架设的）
反向代理，架设在服务器端；（nginx是放在服务器上的）
2、代理对象不同
正向代理，代理客户端，服务端不知道实际发起请求的客户端；
反向代理，代理服务端，客户端不知道实际提供服务的服务端；
3、用途不同
正向代理，为在防火墙内的局域网客户端提供访问Internet的途径；
反向代理，将防火墙后面的服务器提供给Internet访问；
4、安全性不同
正向代理允许客户端通过它访问任意网站并且隐藏客户端自身，因此必须采取安全措施以确保仅为授权的客户端提供服务；反向代理都对外都是透明的，访问者并不知道自己访问的是哪一个代理。
正向代理是客户端找代理，把自己的请求转发给服务端；而反向代理，则是服务端找代理，把自己接受到的请求转发给背后的其他机器。正向代理，代理服务器为客户端服务；反向代理，代理服务器为服务端服务。

nginx常用配置：

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log debug;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/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  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  60s;


    client_max_body_size 1024m;

    #gzip  on;
    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss;
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";

    server {
        listen       80;
        server_name  127.0.0.1 stdemo.suntang.com;

	      #添加头部信息
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location / {
            #vue项目部署路径
            root /usr/share/nginx/html/;
            #解决页面刷新404问题
            try_files $uri $uri/ /index.html last;
            index  index.html index.htm;
            add_header Cache-Control "no-cache, no-store";
        }

        location /image/ {
            root   /var/filecenter/;
        }
        location /static/ {
            root   /var/filecenter/;
        }
        location /car/ {
            root   /var/filecenter/;
        }

        #接口端
        location /police/ {
            proxy_pass   http://127.0.0.1:8080/police/;
            proxy_redirect default;
            proxy_http_version 1.1;
            proxy_connect_timeout   60;
            proxy_send_timeout      60;
            proxy_read_timeout      90;
        }

        #地图api
        location /geoserver/ {
            proxy_pass   http://192.168.1.182:8060/geoserver/;
            proxy_redirect default;
        }

        # redirect server error pages to the static page /50x.html
        #
        # 系统临时维护请打开下面这行注释，并重启nginx,维护完毕后请注释下年这行,并重启nginx
        rewrite ^(.*)$ /maintainace.html break;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html/;
        }
    }
#    include /etc/nginx/conf.d/*.conf;
}

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

这里nginx的配置这块还是蛮多的，这里就不过多的解释了。需要了解的可以看看这篇文章：https://juejin.cn/post/7007346707767754765。看着内容很多，但是其实主要就修改几个地方就可以了。下次我再写文章详细的讲一下nginx配置。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/85500