【VUE】解决跨域

前言

VUE引用axios组件经行二次封装请求

前端本地项目请求远程服务器接口报出跨域错误

Access to XMLHttpRequest at 'http://manage.sdk.phpfunny.cn/index/portal_site/v1/home' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

网上说有可以使用jsonp 或者 nodejs代理 前端解决跨域问题

我采用的是nodejs代理 方式。

第一步：

首先在/config/index.js

在dev配置中 proxyTable：{} 添加以下代码

proxyTable: {
          '/api': {
            target: 'http://manage.sdk.phpfunny.cn', //你要跨域的网址 比如 'http://news.baidu.com',
            // secure: true, // 如果是https接口，需要配置这个参数
            changeOrigin: true,
            pathRewrite: {
            '^/api': ''
            }
          }
        },

第二步：

在二次封装axios中 设置baseURL

axios.defaults.baseURL = '/api';

第三步：

重启npm

npm run dev

参考：vue解决跨域问题