网站报错

当发生跨域问题时,会出现如下错误:

1
Access to XMLHttpRequest at 'http://192.168.1.100:8123/portal/notice/updateAnnexInfo' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

报错原因

网站和其他源的资源的交互式被同源策略保护的,而对于两个URL的protocol、port和host都相同,则这两个URL是同源,否则不是同源,会被同源策略保护而报上面的错误。

解决方法

Vue项目

开发环境跨域解决

如果要在生产环境中解决跨域问题,需要在Vue.config.js中进行如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
devServer: {
proxy: {
// 配置跨域
'/api': {
target: 'http://192.168.1.100:8123/portal',
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},

生产环境跨域解决

该配置需要在服务器上解决,我用的是nginx服务器,因此只有nginx服务器的解决方案:

1
2
3
4
5
6
7
8
9
10
11
12
server {
listen 80; #监听端口

location / {
root html;#文件根目录
index index.html index.htm;#默认起始页
}

location /api {
proxy_pass http://192.168.1.100:8123/portal; //配置代理的路径
}
}

上面是最基础的服务器跨域设置,该配置其实就是使用nginx进行了代理配置。