vue请求后端接口提示：CORS header miss ‘Access-Control-Allow-Origin’

本文主要是介绍vue请求后端接口提示：CORS header miss ‘Access-Control-Allow-Origin’，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原因分析：

  url请求中协议、域名、端口中只要有任意一个与当前url不相同，及出现跨域。

解决方案：

1. JSONP (利用<script>标签的跨域能力)

   例如：

   <img src="图片url地址" alt="" />

   <script src="http://www.example.com?callback=callFn">

2. CORS(CORS是一种基于HTTP头部的机制，通过在服务器端设置响应头部来允许跨域请求。)

   实现流程:

   浏览器发送一个预检请求到后台服务，后台服务通过响应头中Access-Control-Allow-Origin允许访问请求。下面是一个python flask项目的示例：

   def create_app(config_name):config = configs[config_name]logger = Logger('drsu_mmp').getlog()app = Flask(__name__)CORS(app, resources={r'/*': {'origins': '*'}},supports_credentials=True)app.config.from_object(config)db.init_app(app)return app
   

3. 代理服务器(通过在同一域名下设置代理服务器，将前端的跨域请求转发到目标服务器上，从而绕过浏览器的同源策略限制)，修改vue.config.js文件。

   • 将新接口请求中的跨域host变更为特定值

     const store = new Vuex.Store({strict: process.env.NODE_ENV !== 'production',state : {current_el_menu : '1',host: 'A',//http://xx.xx.xx.xx:8080' //'http://127.0.0.1:5000/',},mutations : {changeMenuId (state, id) {state.current_el_menu = id;localStorage.setItem('current_el_menu', id);},},actions : {},getters : {current_el_menu : state => {return state.current_el_menu || JSON.parse(localStorage.getItem('current_el_menu'));},}
     })
     export default store
     

   • vue2

     module.exports = {dev : {proxyTable : {'/A' : {        //表示会拦截以api为开头的请求target : 'http://xx.xx.xx.xx:8080',    //表示需要请求的目标urlchangeOrigin : true,    // 是否开启跨域pathRewrite : {        //重写路径'^/A' : 'http://xx.xx.xx.xx:8080'       //把特定路径的变为目标host}}},
     

   • vue3

     module.exports = {devServer:{proxy:{'/A' : {        //表示会拦截以api为开头的请求target : 'http://xx.xx.xx.xx:8080',    //表示需要请求的目标urlchangeOrigin : true,    // 是否开启跨域pathRewrite : {        //重写路径'^/A' : 'http://10.10.20.25:8080'       //把特定路径的变为目标host}}}
     }
     

这篇关于vue请求后端接口提示：CORS header miss ‘Access-Control-Allow-Origin’的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---