189 8069 5689
这篇文章给大家分享的是有关如何解决VueJs前后端分离跨域问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
十载的济水街道网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整济水街道建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“济水街道网站设计”,“济水街道网站推广”以来，每个客户项目都认真落实执行。
使用vue-cli搭建的vue项目
可以使用在项目内设置代理（proxyTable）的方式来解决跨域问题
设置配置项的目录在config下的index.js，主要通过配置proxyTable项，设置代理指向你的后台地址
dev: {
env: require('./dev.env'),
port: 8085,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/agent': {
target: 'http://127.0.0.1:7105/',
changeOrigin: true,
pathRewrite: {
'^/agent': ''
}
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}前端使用vue-resource来发起请求时
//在main.js中设置公用的地址
Vue.prototype.rootUrl = '/agent/';
//在具体page中发起请求的方式
that.$http.post(this.rootUrl + 'login', parms).then(function (response) {
// 响应成功回调
console.log(response);
}, function (response) {
// 响应错误回调
});其他方式搭建的前端项目，通过使用nginx启动前端服务同时配置代理
下列是我的nginx配置文件，不管是通过什么方式搭建的前端项目，构建成功后都会输出一个dist文件，我们只需要将nginx服务目录指向你的dist文件下你项目的入口文件即可
我的文件目录是 root D:\openplatform\portal\webapp\dist; 更改此条配置到你的目录 我入口文件名称是index.html 使用的是vue-cli打包的项目，参考vue-cli npm run build的dist目录，指向那个目录下
#user nobody;
worker_processes 4;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" "$status" $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for" "$gzip_ratio" $request_time $bytes_sent $request_length';
log_format main '[$time_iso8601] [$remote_addr] [$request] [$http_user_agent] [$cookie_customerID_cookie_flag] [$args]';
access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 3;
gzip_proxied any;
gzip_types *;
server {
listen 80;
root D:\openplatform\portal\webapp\dist;
index index.html;
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
location ^~/agent/ {
proxy_pass http://127.0.0.1:7105/;
proxy_redirect http://127.0.0.1:7105/ /;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 600s;
proxy_read_timeout 600s;
proxy_send_timeout 600s;
}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}感谢各位的阅读！关于“如何解决VueJs前后端分离跨域问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！