vue跨域解决的几种方案「建议收藏」

vue跨域解决的几种方案「建议收藏」vue跨域解决的几种方案一、开发环境解决跨域方法平时使用vue开发的时候,大多会使用vue-cli搭建项目,在vue-cli搭建的项目中有一个配置文件vue.config.js,可以在该文件中进行相应的配置解决开发环境的跨域问题。第一步设置公共urlapi/index.jsimportaxiosfrom’axios’importrouterfrom’@/router/index.js’importstorefrom’@/store/index.js’//创建一个axios

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

vue跨域解决的几种方案

一、开发环境解决跨域方法

平时使用vue开发的时候,大多会使用vue-cli搭建项目,在vue-cli搭建的项目中有一个配置文件vue.config.js,可以在该文件中进行相应的配置解决开发环境的跨域问题。
第一步设置公共url

api/index.js

import axios from 'axios'
import router from '@/router/index.js'
import store from '@/store/index.js'
// 创建一个axios实例
var instance = axios.create({ 
   
    baseURL: "/api",
})

// 请求拦截器
instance.interceptors.request.use(function (config) { 
   
    config.headers['E_Token'] = store.state.user.E_Token;
    return config;
}, function (error) { 
   
    // 对请求错误做些什么
    return Promise.reject(error);
})

// 响应拦截
instance.interceptors.response.use(function (config) { 
   
   if(config.data.retCode !=0){ 
   
        // 处理后台异常
        return false;
    }
    return config;
}, function (error) { 
   
    return Promise.reject(error)
})

export default function (method, url, data = null) { 
   
    method = method.toLowerCase();
    if (method == 'post') { 
   
        return instance.post(url, data)
    } else if (method == 'get') { 
   
        return instance.get(url, data)
    } else if (method == 'delete') { 
   
        return instance.delete(url, data)
    } else if (method == 'put') { 
   
        return instance.put(url, data)
    } else { 
   
        console.error('未知的method' + method)
        return false
    }
}

api/modules/pagesApi.js

import req from '../index'

//用户注册接口
export const register =(params)=>{ 
   
    return req("post", '/user/register', params)
}

//用户登录接口
export const login =(params)=>{ 
   
    return req("post", '/user/login', params)
}


//Model列表及分页
export const getFormList =(params)=>{ 
   
    return req("post", '/model/getFormList', params)
}

//查看详情
export const queryModel =(params)=>{ 
   
    return req("get", '/model/queryModel/'+params.id,{ 
   })
}

//Model删除接口
export const deleteModel =(params)=>{ 
   
    return req("delete", '/model/deleteModel/'+params.id,{ 
   })
}


//Model新增
export const insertModel =(params)=>{ 
   
    return req("post", '/model/insertModel', params)
}

通过拦截器我们可以更加容易的与后台进行交互,同时简洁了代码,使得管理更加容易,我们创建拦截器的时候可以指定baseUrl,这里我指定的是**”/api”,因为接下来我们需要对“/api”进行拦截配置,目的是凡是以“/api”开头的请求url都会将url中的“/api”**的前面添加上我们指定的内容。
例如:

'/api/user/login'     替换成   'http://119.20.224.137:8201/api/user/login'

vue.config.js

devServer: {
    // 1.指定服务的ip
    host: "192.168.0.128",
    // 2.指定服务的端口
    port: 3000,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
	// 3.开发环境进行http的代理
    proxy: {
	   // 匹配 url 路径的开头
      '/api': {
	    // 1.路劲只要是/api开头的url都代理到下面这个网站。
        // 例如:'/api/xxxx' 会代理到 https://119.20.224.137/api/xxxx
        target: 'http://119.20.224.137:8201',
        changeOrigin: true,
        pathRewrite: { '^/api': '/api/' }
      }
    }
  },

二、生产环境解决跨域方法

配置nginx代理

使用nginx反向代理,在配置文件nginx.conf中找到server{}对象,更改项目地址root和配置代理地址proxy_pass,这个方法适合前端静态文件使用:

location / { 
   
    root   D:/browseClient/dist;  #自己的前端项目地址
    index  index.html index.htm;
}
#解决跨域
location /api { 
                                   # 自定义nginx接口前缀
    proxy_pass   http://127.0.0.1:3000;            # 后台api接口地址
            proxy_redirect default;      
    #设置主机头和客户端真实地址,以便服务器获取客户端真实IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
}

三,后端处理

 response.setHeader("Access-Control-Allow-Origin", "*");//* or origin as u prefer
 response.setHeader("Access-Control-Allow-Credentials", "true");
 response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
 response.setHeader("Access-Control-Max-Age", "3600");
 response.setHeader("Access-Control-Allow-Headers", "content-type, authorization");
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187176.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 1到n阶乘算法的改进「建议收藏」

    1到n阶乘算法的改进「建议收藏」1到n阶乘算法的改进之前用到过好几次了,但总是很长时间不用就会忘了,所以这次直接把它扔进来了。之前总是喜欢用双层循环,其实一个单层循环足以,下面将用Python和C++两种语言进行展示C++:#include<iostream>usingnamespacestd;intmain(){ intsum=0,tmp; for(inti=1;i<=10;i++) { tmp=1; for(intj=1;j<=i;j++) tmp*=j; sum

  • html简单登录页面代码

    html简单登录页面代码图片必须是在Imges下的否则显示不出来(复制代码的话把图片换成你的图片就好了)代码如下&lt;html&gt;&lt;head&gt;&lt;title&gt;tes

  • 全排列 leetcode_8的全排列

    全排列 leetcode_8的全排列原题链接给定一个 没有重复 数字的序列,返回其所有可能的全排列。示例:输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]]题解回溯即可class Solution {public: vector<vector<int> >res; vector<int>t; void dfs(int num,int len,vecto

  • Gradle‘s dependency cache may be corrupt (this sometimes occurs after a network connection timeout)

    Gradle‘s dependency cache may be corrupt (this sometimes occurs after a network connection timeout)

  • 网络电视测试软件,2018三款智能电视屏幕检测软件,当贝市场良心推荐「建议收藏」

    2018三款智能电视屏幕检测软件,当贝市场良心推荐2018年03月01日18:08作者:厂商投稿编辑:鸿雁分享买电视后,很多朋友会发现,虽然电视是从厂家那里发的最新的货,但还是有不同层次的瑕疵,但电视机的保修期有限,该怎么查出所有电视上存在的问题呢?小编这里就整合出了三个软件,可以查出电视坏点、漏光等问题,为大家造福。智能电视用户可以在当贝市场中安装以下软件检测。第一个:电视屏幕大师电视屏幕大师…

  • 视频传输协议(常用的视频协议)

    SDP协议RTPRTCPSRTPRTP只负责传输数据包,需要与RTCP配合使用,由RTCP来保证RTP数据包的服务质量。每一个RTP数据报都由头部(Header)和负载(Payload)两个部分组成,其中头部前12个字节的含义是固定的,而负载则可以是音频或者视频数据。整个IP报文由IP报头、UDP报头、RTP报头、RTPPayload(音频或视频数据)组成, IP协议最大传输单元(MTU)最大为1500字节,其中包括至少20字节的IP头、8字节的UDP头、12字节的RTP头, 这样,头信息

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号