vue开发解决跨域问题,vue项目解决问题

一、tmdz 在使用 create-react-app 脚手架创建 react 项目的时候，在开发时进行接口访问的时候，会出现跨域问题。解决方法是在 package.json 文件中增加如下配置，如下所示："proxy": "http://localhost:5000" // 配置你要请求的服务器地址 这一种方法只针对于低版本的，create-react-app 的版本低于 2.0 的时候可以在 package.json 增加 proxy 配置，proxy 可以是 object 类型。 二、方案二 在使用 create-react-app 脚手架创建 react 项目的时候，在开发时进行接口访问的时候，会出现跨域问题。解决方法是在 package.json 文件中增加如下配置，配置多个代理。target 是目标服务器；changeOrigin 是默认 false ，是否需要改变原始主机头为目标 URL；secure 是如果是 https 接口 需要配置这个参数为 true；pathRewrite 是重写请求，比如我们源访问的是 api，那么请求会被解析为 /，如下所示： "proxy": { "/data": { "target": "http://localhost", "changeOrigin": true, "pathRewrite": {"^/api" : "/"} }, "/rest": { "target": "http://localhost/rest", "changeOrigin": true, "pathRewrite": {"^/api" : "/"} } } 在运行后，会报错，提示只支持 string 类型，不支持 object，也同意是只支持低版本的。对此，解决办法是降级，需要删除 node_module/react-scripts，然后执行 npm i react-scripts@1.1.1 --save， 最后重启服务即可由前端解决跨域问题。 三、方案三

先下载 http-proxy-middleware，使用 http-proxy-middleware 解决跨域问题，通过 npm i http-proxy-middleware --save 命令下载 http-proxy-middleware。

创建 src/setupProxy.js，代码如下所示：

const proxy = require("http-proxy-middleware");module.exports = function (app) {// proxy第一个参数为要代理的路由 app.use(proxy("/data", { target: "http://localhost", //配置你要请求的服务器地址，代理后的请求网址 pathRewrite: {'^/data': ''}, //路径重写 changeOrigin: true, // 是否改变请求头 })) app.use(proxy("/rest", { target: "http://localhost/rest", pathRewrite: {'^/data': ''}, changeOrigin: true, }))};

通过 npm run eject 或者是 yarn eject 命令，让 react 项目中的配置文件暴露出来。

在暴露后的配置文件中，start.js 里面做一下配置，如下所示：

require('../src/setupProxy')(devServer);

在 webpack.dev.conf.js 中的 devServer 项进行配置，webpack 文件是自己配置的， 没有暴露 create-react-app 的 eject 文件，代码如下所示：

devServer: { // 配置webpack-dev-server， 在本地启动一个服务器运行 host: 'localhost', // 服务器的ip地址 希望服务器外可以访问就设置 0.0.0.0 port: 8088, // 端口 open: true, // 自动打开页面 historyApiFallback: true, proxy: { "/v1": { "target": "https://www.google.com/", "changeOrigin": true } } },