vue-cli项目开发/生产环境代理实现跨域请求的详细说明

开发环境中的跨领域

使用vue-cli创建的项目的开发地址是localhost:8080，需要访问不在本地计算机上的接口http://192 . 168 . 0/CMS/querymaterial，不同域名之间的访问需要跨域才能正确请求。33830 . 360808010303跨域的方法很多，通常需要后台配置。而vue-cli创建的项目可以直接利用node.js代理服务器，通过修改vue proxyTable接口实现跨域请求。在vue-cli项目的config文件夹下的index.js配置文件中，修改前的dev:

Dev: {Assets子目录：' static '，//静态资源根目录的static子目录，即dist目录下的Static Assets publicath 3360 '/，//编译发布的根目录。可以配置为资源服务器域名或CDN域名proxyTable: {}，//proxy table/proxy table/proxy table代理(跨域)主机3360' localhost '，端口： 8080，//dev-server端口号，可以自行更改autoopenbrowser: false。//是否自动打开浏览器错误覆盖： true，notifyonerrors: true，poll 3360 false，useeslint3360 true。showesinterrosinoverlay : false，devtool : '廉价-模块-评估-源-映射'，cachebusting 3360 true，CSS source map 3360 true//默认情况下，CSS Sourcemaps是关闭的，因为使用相对路径会报告错误}，只需修改proxyTable: {}

ProxyTable: {'/cms': {//代理地址target : ' http://192 . 168 . 0 . 112:8080 '，//代理地址更改原点： true是必需的，//是否跨域secure: false，pathreadwrite : { '/cms ' : '/CMS '/本身没有/CMS '的公共前缀，

这个。$axios.get('/cms/queryMaterial '，{ params: params })。然后((RES)={ console . log(RES)；}).catch((err)={ console . log(err))；})如果访问接口上没有安装axios，则需要安装

1)安装：npm安装axios - save-dev

2)从2)main.js中的' axios '导入axios；//引入axios用于地址访问Vue.prototype. $ axios=axios(注：用原型代替使用。)

1.参数可代理的详细说明：

vue-cli的配置文件中的参数：proxyTable，主要是一个地址映射表。您可以通过设置它来简化复杂的url。例如，我们想要请求的地址是www.xxx.com/list/1,可以设置如下：

代理表： { '/list ' : { Target : ' http://www . XXX.com '，Path重写3360 {'/list' 3360'/list'}}所以我们写url的时候只能写/list/1来代表www.xxx.com/list/1.

那么如何解决跨域问题呢？实际上，在上面的“列表”参数中有一个changeOrigin参数，它接收一个布尔值。如果设置为true，那么本地服务器会虚拟接收你的请求，并代表你发送，这样就不会出现跨域的问题，当然这只适用于开发环境。添加的代码如下：

代理表： { '/list ' : {目标：' http://www.xxx.com '，更改原点： true，路径重写3360 { '/list ' : '/list ' } } 2。重写意义

要使用代理，首先你必须有一个标志，告诉他你想为这个连接使用代理，否则，你的静态资源，如html、css和js可能会运行到代理。所以我们只需要对接口使用代理，对静态文件使用本地代理。/list': {}，也就是告诉节点，只有当接口以“/list”开头时，我才会使用代理。因此，您的接口应该写成/list/xx/xx，最终的代理路径是http://xxx.xx.com/list/xx/xx.但这是错误的。我正确的接口路径中没有/list，所以我需要pathRewrite，用'/list' : ' '移除'/list '，这样我在请求接口时就可以有正确的标识并移除列表。当然，如果它自己的接口中有/list，那么可以删除参数pathRewrite。

生产环境中的跨域

1)设置nginx配置文件：

服务器{.位置/CMS { add _ header ' Access-Control-Allow-Origin ' ' * '；proxy _ pass http://192 . 168 . 0 . 112:8080/CMS；} .}2)跨域的java后端配置

if(method . equals(' OPTIONS '){ response . setheader(' Access-Control-Allow-Headers '，' accept，content-type ')；response.setHeader('访问控制-允许-方法'，' POST ')；} response . setheader(' Access-Control-Allow-Origin '，' * ')；设置不同的接口地址

通常我们团队开发的时候是在公司的局域网内，调用接口也在局域网内。但是，当项目上线时，请求接口在在线服务器端，因此存在接口之间来回切换的问题。使用vue-cli构建项目后，可以通过进行相关配置来实现，无需手动更改接口路径，也可以在不同环境下请求接口。

1.设置不同的接口地址

首先找到以下文件/config/dev.env.js，/config/prod.env.js，在dev.env.js中可以看到以下内容。

使用严格的“const merge=require(' web pack-merge ')const prodEnv=require('。/prod . env’)module . exports=merge(prod env，{NODE_ENV: ''development''})这是开发环境的参数配置，然后我们可以在上面的文件中添加一行代码如下：这是本地测试环境请求的后台接口的域名。

使用严格的“const merge=require(' web pack-merge ')const prodEnv=require('。/prod . env’)module . exports=merge(prodEnv，{node _ env3360'' development ' '，API _ root : ' '//192 . 168 . 0 . 112:8080 ' ' })并找到prod.env.js文件，如下所示：

使用严格的' module . exports={ node _ en v : ' ' production ' ' }我们添加一行代码如下：这是我们上传服务器后后台接口的域名。

使用“严格”模块。exports={ node _ en v 3360 ' ' production ' '，API _ root : ' '//www . Baidu.com/API ' ' } 2。调用代码中设置的参数：

比如我在这个项目中重新打包了Axios(API文件在/src/axios/request.js中)，将配置好的接口地址拼接到接口路径中作为baseURL。应用参数如下：process.env.API_ROOT

最后，只需重启项目。当npm运行开发时，它在生产环境中运行，当npm运行构建时，它是一个正式的在线环境。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。