Vue项目启动报错： No ‘Access

admin管理员组

文章数量:1794759

Vue项目启动报错： No ‘Access

     刚开始学前端知识，在调用后端接口时出现：报错 

      has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource。

我的前后端时分开的，前端端口是8080，后端服务的端口是999。http请求是由axio来实现的。

import request from '@/utils/AxiosHttpUtil'; export default { getTableInfos(params) { let result = request({ url: 'localhost:9999/nodejs-service/nodejs/getList', method: 'get', params: params }); return result; }, page(params) { let result = request({ url: 'localhost:9999/nodejs-service/nodejs/page', method: 'post', data: params }); return result; }, submitData(params) { let result = request({ url: 'localhost:9999/nodejs-service/nodejs/formSubmit', method: 'post', data: params }); return result; }, getDocxData(params){ let result = request({ url: 'localhost:9999/nodejs-service/nodejs/getFileData?' + params, method: 'get',responseType: 'blob' }); return result; } }

      在接口调用的时候就出现了，报错： .....has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource。

     最后发现是跨域的问题。经过尝试目前发现有三种方式可以解决。

第一种：

        实现在返回的response中加入请求头。

@GetMapping("/getList") public List<UserInfoDto> getMethod(HttpServletRequest request, HttpServletResponse response){ response.setHeader("Access-Control-Allow-Origin", "*"); return Arrays.asList(new UserInfoDto("root","root", new Date(), "111111"), new UserInfoDto(), new UserInfoDto(UUID.randomUUID().toString(),"zhang", new Date(), "22222"), new UserInfoDto(),new UserInfoDto(), new UserInfoDto(), new UserInfoDto()); }

这种方法要求每一个后端接口(可以跨域的接口)都需要加入代码。比较麻烦。

第二种：

后端配置统一的允许跨域的接口。

@Configuration public class InterceptorConfigure extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry corsRegistry){ /** * 所有请求都允许跨域，使用这种配置就不需要 * 在interceptor中配置header了 */ corsRegistry.addMapping("/**") //接口匹配 .allowCredentials(true) .allowedOrigins("*") .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") .allowedHeaders("*") .maxAge(3600); } }

这种方法比较实用，但是需要修改后端代码。

第三种：

前端配置跨域请求。

首先需要下载 http-proxy-middleware ，在项目下执行命令：

npm install http-proxy-middleware -save-dev

然后在项目的从config下建立一个proxyConfig.js文件。内容如下：

module.exports = { proxyList:{ "/nodejs-service":{ target:"localhost:9999", //目的地的地址，需要有 changeOrigin:true, //必须，允许跨域 pathRewrite:{ //重写路径 //如： //不配置，则表示接口路径不变直接转发到指定的 服务localhost:9999上 // '^/nodejs-service/oldpath':'/nodejs-service/new-path', // '^/nodejs-service':'', } } } }

 然后在config的目录下的index.html中加入以下配置

定义变量： const proxyConfig = require('./proxyConfig')

在dev下加入： proxyTable: proxyConfig.proxyList,

 改变自己调用接口的地址，去掉IP信：

import request from '@/utils/AxiosHttpUtil'; export default { getTableInfos(params) { let result = request({ url: '/nodejs-service/nodejs/getList', method: 'get', params: params }); return result; }, page(params) { let result = request({ url: '/nodejs-service/nodejs/page', method: 'post', data: params }); return result; }, submitData(params) { let result = request({ url: '/nodejs-service/nodejs/formSubmit', method: 'post', data: params }); return result; }, getDocxData(params){ let result = request({ url: '/nodejs-service/nodejs/getFileData?' + params, method: 'get',responseType: 'blob' }); return result; } }

这样就完成了。

本文标签： 报错项目VueAccess