本文共 2491 字，大约阅读时间需要 8 分钟。

No Access-Control-Allow-Origin

Vue前端向后端请求数据时浏览器报错了， 原因是跨域的问题（ajax请求失败）

原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。

如：http://localhost:11000/#/cms/page/list

http——协议

localhost——服务器

11000——端口

所以， 只有协议、服务器、端口相同的时候，ajax才能正常在前后端之间传输数据，否则出现跨域问题

注：只有浏览器发送的请求才存在跨域问题， 服务端与服务端之间不存在跨域问题

解决方案一：Vue采用proxyTable解决。（代理服务器）

意思就是既然我浏览器不能跨域了， 我直接了当的， 找个中间人替我把事情解决了不就好了吗？ 所以就调用了proxyTable http服务器代理

cms.js文件

import http from './../../../base/api/public'import querystring from 'querystring'let sysConfig = require('@/../config/sysConfig')//标识一些url， 表示这些url是要发送到Node.js服务器let apiUrl = sysConfig.xcApiUrlPre;//定义方法， 请求服务端的页面接口export const page_list = (page, size, params)=>{    //返回一个Promise对象    //向后端相应的映射请求数据    return http.requestQuickGet(apiUrl + "/cms/page/list/" + page + "/" + size);    //相当于   // return http.requestQuickGet(“/api” + "/cms/page/list/" + page + "/" + size);   //将之前的http://localhost:端口 都去掉， 加上 "/api" 这个字符串，表示这个是要跨域的请求   //那么proxyTable http服务器代理就会识别，然后对后端服务器发送请求咯！}

index.js文件

//服务端代理解决浏览器跨域的中间件proxyTable: {    //所有以'/api/cms'开头的请求路径都要发到此处代理   '/api/cms': {     //target是要发送的服务器的Http协议、服务器、端口     target: 'http://localhost:31001',     //去掉url中api的字符串， 然后拼接 target中的字符串就变成了真正的请求路径了！     pathRewrite: {       '^/api': ''     }   }}

你看， 端口是11000， 是前端的端口， 后端端口是31001，表明了浏览器发了一个被标识的请求路径而被服务器代理中间件识别， 然后服务器代理中间件将该路径修改了（端口改了， ‘api’字符串去掉了），然后成功跨域！

解决方案二：

使用SpringBoot的配置，允许浏览器跨域访问该项目

/*    浏览器跨域请求配置 */@Configurationpublic class CorsConfig {
       @Bean    public CorsWebFilter corsWebFilter(){
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();        CorsConfiguration corsConfiguration = new CorsConfiguration();        //配置跨域        corsConfiguration.addAllowedHeader("*"); //允许跨域的请求头（报文头）信息（"Accept", "Origin", "X-Requested-With", "Content-Type","Last-Modified", "device", "token"）        corsConfiguration.addAllowedMethod("*"); //允许跨域的请求方法（"GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS"）        corsConfiguration.addAllowedOrigin("*"); //允许跨域的来源——前端Vue项目的IP与端口(http://localhost:8089)        corsConfiguration.setAllowCredentials(true); //允许跨域请求携带Cookie信息，否则跨域请求会出现Cookie信息丢失的情况//        corsConfiguration.setMaxAge(3600L); //跨域预检请求的有效期，单位为秒。//        corsConfiguration.setAllowCredentials(true); // 是否支持安全证书        source.registerCorsConfiguration("/**", corsConfiguration); //所有请求都要接收跨域配置的检测        return new CorsWebFilter(source);    }}

补充可能出现的异常：

项目配置好跨域配置后，访问如果出现 “原因：不允许有多个 ‘Access-Control-Allow-Origin’ CORS 头” 的问题，说明你配置了多个跨域的配置项，将多余的注释掉即可。

转载地址：http://qfern.baihongyu.com/