axios请求跨域前端解决_10、axios请求以及跨域问题，前端解决方法。11、后端-nginx解决方法...

安装

cnpm install --save axios

引入 axios

前端解决跨域

flask 后端代码,

from flask importrender_template, json, jsonify,Flaskfrom flask_cors importCORS, cross_origin

app= Flask(__name__)

@app.route('/api/getdata')defindex():

data={'name':'test'}returnjsonify(data)if __name__ == '__main__':

app.run(debug=True,host='0.0.0.0')

tets.py

App.vue 前端跨域配置methods 请求后端参数

Hello App!

Go to Foo

Go to Bar

User

{{name_data}}

name:'app',

data() {return{

userid:"1233232",

name_data:'', //定义name返回值

}

},

methods: {//挂载完成出发，跨域操作

getdata(){

this.$axios.get('/api/getdata').then((response)=>{

console.log(response.data)

this.name_data= response.data.name //拿到后返回name值

}).catch((response)=>{

console.log(response)

})

}

},

mounted() {

this.getdata()

}

}

App.vue

indwx.js 前端解决跨域

proxyTable: {

'/api': {

changeOrigin: true,

target: 'http://10.12.30.70:5000',

pathRewrite: {

'^/api': '/api'

}

}

},

main.js

index.js

接收到 后端返回的  name：test. 前端渲染

flaks后端解决跨域：

生产环境中打包，没有前端跨域，所以使用后端跨域

跨域是指：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，然后在Js中通过Ajax访问C服务器的静态资源或请求。即：浏览器A从B服务器拿的资源，资源中想访问服务器C的资源。

同源策略是指：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，为了用户安全，浏览器加了限制，其中的Js通过Ajax只能访问B服务器的静态资源或请求。即：浏览器A从哪拿的资源，那资源中就只能访问哪。

同源是指：同一个请求协议(如：Http或Https)、同一个Ip、同一个端口，3个全部相同，即为同源。

前后端分离在开发调试阶段本地的flask测试服务器需要允许跨域访问，简单解决办法有

1、使用 flask_cors

pip3 install flask_cors

flask.py 后端代码， 加上这一条即可

CORS(app, supports_credentials=True)

from flask importrender_template, json, jsonify,Flaskfrom flask_cors importCORS, cross_origin

app= Flask(__name__)

CORS(app, supports_credentials=True) #加上这一条就实现跨域了

@app.route('/api/getdata')defindex():

data={'name':'test'}returnjsonify(data)if __name__ == '__main__':

app.run(debug=True,host='0.0.0.0'

test.py

App.vue   去掉 index.js中的 proxyTable。

Hello App!

Go to Foo

Go to Bar

User

{{name_data}}

name:'app',

data() {return{

userid:"1233232",

name_data:'', //定义name返回值

}

},

methods: {//挂载完成出发，跨域操作

getdata(){

this.$axios.get('http://10.12.30.70:5000/api/getdata').then((response)=>{

console.log(response.data)

this.name_data= response.data.name //拿到后返回name值

}).catch((response)=>{

console.log(response)

})

}

},

mounted() {

this.getdata()

}

}

View Code

可以添加头部信息，在想要的时候添加头部信息：

2、在想要的时候添加头部信息：

@app.after_requestdefaf_request(resp):"""#请求钩子，在所有的请求发生后执行，加入headers。

:param resp:

:return:"""resp=make_response(resp)

resp.headers['Access-Control-Allow-Origin'] = '*'resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'

return resp

View Code

nginx解决跨域问题

flask 后端

from flask importrender_template, json, jsonify,Flaskfrom flask_cors importCORS, cross_origin

app= Flask(__name__)#CORS(app, supports_credentials=True) # 加上这一条就实现跨域了

@app.route('/api/getdata')defindex():

data={'name':'test'}returnjsonify(data)if __name__ == '__main__':

app.run(debug=True,host='0.0.0.0'

test.py

nginx配置

location /{

proxy_pass http://127.0.0.1:8080; ###vue

}

location/api {

proxy_pass http://127.0.0.1:5000; ###后端服务

}

nginx.config

App.vue 中接口访问nginx代理就可以