apache vue跨域_vue解决跨域问题

开发模式

要知道，跨域这个行为是浏览器禁止的，但是服务端并不禁止。使用proxyTable的原理就是将域名发送给本地的服务器，再由本地的服务器去请求真正的服务器。

打开config/index.js，修改dev里的proxyTable

proxyTable:{

'/': {

target: 'http://www.xxx.cn/api', //你要访问的服务器域名

changeOrigin: true, //允许跨域

pathRewrite: {

'^/': ''

}

当你在别的页面请求时只要是/，你只需要/xx/xxx 它就会帮你处理成 http://www.xxx.cn/xx/xxx。

假如项目需要请求两个不同的域名，proxytable在上面的基础上再增加，当请求时/json/xx/xxx开头的最后都会转换成http://www.aaa.cn/xx/xxx

'/json': {

target: 'http://www.aaa.cn/', //你要访问的服务器域名

changeOrigin: true, //允许跨域

pathRewrite: {

'^/json': ''

}

但实际上接口是没有json的，这只是你用来区分请求的一个别名，这时pathRewrite就可以将/json去掉

生产环境

找到config/pro.env.js

module.exports = {

NODE_ENV: '"production"',

API_ROOT: '"http://www.xxx.cn/"'

}

在config目录下新建api.js文件

const root = process.env.API_ROOT; //在开发模式下为会调用代理

export const getList = root + '/list'

这样配置后你可以直接在组件写请求的url不需再判断处于哪个模式下，都可以跨域请求。

apache vue跨域_vue解决跨域问题相关推荐

【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
vue cli配置代理解决跨域问题
内容跨域问题解决跨域问题 vue cli配置代理跨域问题是由于违背了同源策略,同源策略规定了协议名.主机名.端口号必须一致我们目前所处的位置是http localhost 8080,我们想向 ...
Vue项目开发过程中解决跨域问题（vue.config.js结合axios）
一.问题描述在本地开发过程中,调用后端提供的接口获取数据将获取的数据渲染到页面中,但是浏览器报错: // 控制台报错信息 Access to XMLHttpRequest at 'http://x. ...
Vue项目生产环境解决跨域问题
一.前言第一次写vue项目,开发完成.打包上线后,一访问,发现访问后端的请求全部报404.我就纳闷了,跨域问题我已经解决了,怎么就报错了.查阅资料,得知我解决的跨域仅适用于开发环境. ememem. ...
Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource
概论: 目录一.跨域问题是怎么产生的 1.1 跨域问题: 1.2 解决办法三.开启代理服务器第一种方式:(存在弊端) 细节问题:(解释两个弊端) 第二种方式:(重要) 配置多个代理一.跨域问题 ...
CORS-跨域资源共享解决跨域问题
1.什么是跨域? a.test.com 和 b.test.com 是两个不同的域,而处于安全机制考虑,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容,但是我们在项目开发时,经常遇到一个页 ...
java 跨域_springboot解决跨域CROS问题，用注解@CrossOrigin
项目是springboot框架,前后端分离,需要跨域,当前前端可以用JSONP解决,但是java端如何解决呢? 因为是springboot框架,所以好多都可以用注解解决问题,所以就用到了@CrossO ...
vue 前端设置允许跨域_vue——前端跨域
***针对的是不同域名.不同协议的跨域: 1.找到config文件中开发环境的配置文件--dev.env.js,在里面将要跨域的域名配置进去 2.找到config文件中线上环境的配置文件--prod. ...

apache vue跨域_vue解决跨域问题

apache vue跨域_vue解决跨域问题相关推荐

最新文章

热门文章