当浏览器控制台出现Access to XMLHttpRequest at ‘http://192.168.88.228/login/Login?phone=19939306484&password=111’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: The value of the 'Access-Contr说明是跨域问题
在这里插入图片描述

一.说跨域,就要先说说‘同源策略’

1、同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。
2、所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
3、同源策略限制以下几种行为:
(1)Cookie、LocalStorage 和 IndexDB 无法读取
(2)DOM 和 Js对象无法获得
(3)AJAX 请求不能发送
浏览器采用同源策略,禁止页面加载或执行与自身来源不同的域的任何脚本。换句话说浏览器禁止的是来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。

二,要怎么解决

1.我是使用,Nginx代理(前端实现)
vue.cli3解决这种错误,首先找到vue.config.js(没有的话新建一个,跟src文件夹同级)

    module.exports = {
	devServer: {
		proxy: {
			'/admin': {
				//代理api
				target: 'http://192.168.1.21:8096', // 代理接口(注意只要域名就够了)
				changeOrigin: true, //是否跨域
				ws: true, // proxy websockets
				pathRewrite: {
					//重写路径
					'^/admin': '' //代理路径
				}
			}
		}
	}
};

2.更改mian.js的axios的根目录

axios.defaults.baseURL = 'http://192.168.1.21:8096' 改成 axios.defaults.baseURL = '/admin'

然后把你要请求的接口改成

let res = await this.$http.get('/zhsq/navigation.do')就是把前面的域名去掉

最后重启就ok了

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐