1.nginx设置跨域
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
daemon off;
events {
worker_connections 65535;
multi_accept on;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - r e m o t e u s e r [ remote_user [ remoteuser[time_local] “$request” ’
'$status b o d y b y t e s s e n t " body_bytes_sent " bodybytessent"http_referer" ’
‘“ h t t p u s e r a g e n t " " http_user_agent" " httpuseragent""http_x_forwarded_for”’;
#access_log logs/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
#keepalive_timeout 0;
keepalive_timeout 65;
server {
listen 8080;
server_name localhost;
= /表示精确匹配路径为/的url，真实访问为http://localhost:8088
location = / {
proxy_pass http://localhost:8088;
}
/no 表示以/no开头的url，包罗/no1,no/son，大概no/son/grandson
真实访问为http://localhost:5500/no开头的url
若 proxy_pass最后为/ 如http://localhost:3000/;匹配/no/son，则真实匹配为http://localhost:3000/son
location /no {
proxy_pass http://localhost:8088;
}
/ok/表示精确匹配以ok开头的url，/ok2是匹配不到的，/ok/son则可以
location /Demo/testDemoTranNew {
proxy_pass http://localhost:8088;
}
}
}
复制代码
2.axios设置跨域
同时在axios中也可以设置跨域，方式如下：
1.修改config/index.js文件
//增长跨域
proxyTable: {
“/api”: {
//目标地点
target: “http://localhost:8088”,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
},
复制代码
2.main.js中增长变量
//跨域处理 相当于把index中的api地点拿过来
Vue.prototype.HOST = ‘/api’
复制代码
直接调用就可以了，完全制止了跨域！
3.axios的get请求
在利用时main.js需要导入axios组件。具体方式请参考下文。
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import axios from “axios”
Vue.config.productionTip = false
Vue.prototype.$axios = axios
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})
复制代码
vue中的get请求.有两种写发，以下附上两种写法的格式。
{{data}}
复制代码
4.axios的post请求
在调用中也有两种写法，需要注意的是，需要利用qs去格式化参数，由于需要把对象转换成json格式。
{{data}}
复制代码
5.url的全局设置
由于假如调用的api前缀相同，那么可以利用全局设置，将url配玉成局，制止多次誊写。
这里需要时对main.js设置，以下附上代码。
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import axios from “axios”
Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = ‘https://api.example.com’;
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
/* eslint-disable no-new */
new Vue({
最后
每年转战互联网行业的人很多，说白了也是冲着高薪去的，不管你是即将步入这个行业还是想转行，学习是必不可少的。作为一个Java开发，学习成了日常生活的一部门，不学习你就会被这个行业镌汰，这也是这个行业残酷的现实。
假如你对Java感爱好，想要转行改变本身，那就要趁着机遇行动起来。或许，这份限量版的Java零基础宝典可以或许对你有所帮助。
uctionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = ‘https://api.example.com’;
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
/* eslint-disable no-new */
new Vue({
最后
每年转战互联网行业的人很多，说白了也是冲着高薪去的，不管你是即将步入这个行业还是想转行，学习是必不可少的。作为一个Java开发，学习成了日常生活的一部门，不学习你就会被这个行业镌汰，这也是这个行业残酷的现实。
假如你对Java感爱好，想要转行改变本身，那就要趁着机遇行动起来。或许，这份限量版的Java零基础宝典可以或许对你有所帮助。
[外链图片转存中…(img-bpeOy0HV-1719257617177)]
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
